并排排列div的有效方法？

Question

什么是并排调整3,4或甚至5个div的最佳方法？每个之间有一个空间将它们分开.

我试过谷歌搜索,但似乎有这么多不同的答案,似乎太依赖于用例(即如果它的2个div或3个div等)我问什么是最好的方法来做任何数量的div？

谢谢

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