围绕字母形成框的div标签的CSS对齐 [英] CSS alignment of div tags that form boxes around letters
问题描述
我试图创建一个在大小相等的框中显示三个字母或单词的模式，这些框是连接的和不同的颜色。我终于得到了完成与这些样式项目display：inline; float：left;。但现在当我尝试把文本之前或之后，或把两组这些套在同一个屏幕上，事情变得疯狂。
样品： http://jsfiddle.net/cmjmb/
<！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENHTTP ：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
< html>
< head>
< style type =text / css>
div.test {
border：1px solid black;
align：center;
padding：10px;
width：50px;
font - size：300％;
}
div.boxtype1 {
背景 - 颜色：＃2BFFE3;显示：内联;浮动：左;
}
div.boxtype2
{
background-color：＃00806F;
display：inline;
float：left;
}
< / style>
< / head>
< body>
Before
< div class ='test boxtype1'> A< / div>
< div class ='test boxtype1'> B< / div>
< div class ='test boxtype2'> C< / div>
After
< br />< br />
之前
< div class ='test boxtype1'> A< / div>
< div class ='test boxtype1'> B< / div>
< div class ='test boxtype2'> C< / div>
After
< br />< br />
< / body>
< / html>
通过使用浮动：左你从正常的元素流中取出盒子，他们浮动到左边，正常的文本在它们周围漂浮。 。也许这不是你想要的东西。
如果你只是离开了浮动：左它看起来更像是你描述。仍然在盒子之间有一些空间。这是正常的白色空间，插入两个单词之间。你可以通过将三个div写在一行上来避免这种情况 - 两者之间没有空格。
I'm trying to create a pattern of showing three letters or words in boxes of equal sizes, and the boxes are connected and different colors. I finally got that accomplished with a these style items "display:inline;float:left;". But now when I try to put text before or after it, or put two of these sets of boxes on the same screen, things go crazy.
Sample: http://jsfiddle.net/cmjmb/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.test {
border: 1px solid black;
align: center;
padding: 10px;
width: 50px;
font - size: 300 % ;
}
div.boxtype1 {
background - color: #2BFFE3;display:inline;float:left;
}
div.boxtype2
{
background-color:# 00806F;
display: inline;
float: left;
}
</style>
</head>
<body>
Before
<div class='test boxtype1'>A</div>
<div class='test boxtype1'>B</div>
<div class='test boxtype2'>C</div>
After
<br /><br />
Before
<div class='test boxtype1'>A</div>
<div class='test boxtype1'>B</div>
<div class='test boxtype2'>C</div>
After
<br /><br />
</body>
</html>
By using float: left you take the boxes out of the normal flow of elements, they 'float' to the left and the normal text floats around them. Probably that's not, what you wanted.
If you just leave out float: left it looks more like what you described. Still there is some space between the boxes. This is the normal white space, that is inserted between two words. You can avoid that by writing the three divs on one line - with no space in between.
这篇关于围绕字母形成框的div标签的CSS对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
