Question

最好的方法是将3个，4个甚至5个div并排排列？每个之间有一个空间将它们分开。

我试过谷歌搜索，但似乎有很多不同的答案，似乎太依赖于用例（即如果它的2个div或3个div等）我问什么是最好的方法为任何数字做这个divs？

由于

Answer 1

这里给出的所有答案都非常好，而且它们是有效的方式。但我试着让你更容易。

<强> 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; 
}

Answer 2

另一种选择：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
}

Answer 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：）

Answer 4

试试这个：

div {
float:left
margin-left:20px; //or whatever you want
}

div:first-child {
margin-left:0;
}

Answer 5

我用这个： http://plugins.jquery.com/project/equalizeCols

并排排列div的有效方法？

5 个答案: