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

我试图创建一个模式显示三个字母或单词在相同大小的框中，并且框连接和不同的颜色。我终于完成了这些风格的项目“display：inline; float：left;”。但是现在，当我试图在文本之前或之后放置文本，或者将这两组文件放在同一屏幕上时，事情就会变得疯狂。CSS对齐的div标签，形成围绕字母框

样品：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>

来源

2012-03-01 NealWalters

'float：left'自动生成一个'display：block'元素，所以我认为'display：inline'是多余的。从你的问题来看，这听起来像是对'浮动'如何工作的根本误解。 – Gareth 2012-03-01 23:11:35

的确，我阅读了文档，但我仍然没有得到一些意义。现在工作正常，没有显示：内联。从显示更改：内联显示：内联块更改框的大小，不知道我明白为什么发生这种情况。 – NealWalters 2012-03-01 23:33:03

'display：inline'使元素在段落中表现得像一个单词。你不能给它尺寸或影响它的位置 - 它会在前一个元素/文本之后直接出现。 'display：inline-block'是类似的，只不过元素现在可以有宽度和高度。它垂直对齐前后的元素/文本是如何受CSS属性vertical-align影响的。 – Gareth 2012-03-01 23:38:12