最好的方法是将3个,4个甚至5个div并排排列?每个之间有一个空间将它们分开。
我试过谷歌搜索,但似乎有很多不同的答案,似乎太依赖于用例(即如果它的2个div或3个div等)我问什么是最好的方法为任何数字做这个divs?
由于
答案 0 :(得分:14)
这里给出的所有答案都非常好,而且它们是有效的方式。但我试着让你更容易。
<强> HTML:强>
<div id="apnd">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Nine</div>
<div>Ten</div>
<div>Eleven</div>
</div>
<强> CSS:强>
#apnd div {
height: 100px;
width: 100px;
border: 1px solid red;
margin-left: 5px;
float: left; /*Here you can also use display: inline-block instead of float:left*/
background: orange;
}
答案 1 :(得分:4)
另一种选择:http://jsfiddle.net/brandondurham/Tht3N/
<div id="row">
<div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div>
</div>
#row {
white-space: nowrap;
}
#row > div {
background: lightblue;
display: inline-block;
height: 50px;
width: 50px;
}
#row > div + div {
margin-left: 10px
}
答案 2 :(得分:3)
有这样的事情:
div.container { display:table; border-spacing:{your-space}px; }
div.container > div { display:table-cell; }
在你的“这么多不同的答案”中设置?
今天,它是制作水平行块元素的最可靠方法。
直到CSS WG接受http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm:)
答案 3 :(得分:0)
试试这个:
div {
float:left
margin-left:20px; //or whatever you want
}
div:first-child {
margin-left:0;
}
答案 4 :(得分:0)