如何创建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

你也可以试试这个最小码