Question

我正在尝试创建一个在相同大小的框中显示三个字母或单词的模式，这些框是连接的和不同的颜色。我终于完成了这些样式项目“display：inline; float：left;”。但是现在当我尝试在它之前或之后放置文本，或者将这些框中的两个放在同一个屏幕上时，事情就变得疯狂了。

示例：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>

Answer 1

将这些文本节点放在标记内，例如<p>。您可以display: inline-block使用div和p：

http://jsfiddle.net/elclanrs/cmjmb/4/

Answer 2

通过使用float: left，您可以从正常的元素流中取出框，它们“浮动”到左侧，普通文本浮动在它们周围。可能不是，你想要的。

如果你遗漏float: left，它看起来更像你所描述的。盒子之间仍有一些空间。这是正常的空格，插入两个单词之间。你可以通过在一行上写三个div来避免这种情况 - 中间没有空格。

Answer 3

或者您可以使用：

br { clear: both;}

div标签的CSS对齐，形成围绕字母的框

3 个答案: