如何創建3個相同大小的盒子？

Question

比方說，我有與以下規格的容器：

.container { 
width: 960px; 
margin: 0 auto; 
height: 500px; 
} 

現在，在中間我想補充的3盒彼此相鄰排列，平行以下規格：

.box1 { 
background-color: #000; 
width: 300px; 
height: 200px; 
} 
.box2 { 
background-color: #999; 
width: 300px; 
height: 200px; 
} 
.box3 { 
background-color: #333; 
width: 300px; 
height: 200px; 
} 

我試着用margin-top和margin-left在每個上面，但是這很麻煩，而且讓它們看起來與它們之間有足夠的溝槽看起來一樣麻煩。什麼是創建這個最好的方法？

Answer 1

你必須把「float：left;」在每個班上。

.container { 
float:left; 
width: 960px; 
margin: 0 auto; 
height: 500px; 
} 

.box1 { 
float:left; 
background-color: #000; 
width: 300px; 
height: 200px; 
} 
.box2 { 
float:left; 
background-color: #999; 
width: 300px; 
height: 200px; 
} 
.box3 { 
float:left; 
background-color: #333; 
width: 300px; 
height: 200px; 
} 

Answer 2

對於每個.boxX項目，添加display: inline - 這將爲您解決問題。

Answer 3

使用CSS屬性：

display: inline-block 

在所有.box類

Answer 4

.container { width: 960px; margin: 0 auto; height: 500px; } 
.container [class*='box'] { width:300px; height:200px; float: left; margin-right: 30px; } 
.container .box1 { background-color: #000; } 
.container .box2 { background-color: #999; } 
.container .box3 { background-color: #333; margin-right: 0; } 

http://jsfiddle.net/DRYBH/#fork

你也可以試試這個最小碼