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