Html 并排对齐div的有效方法？

将3个、4个甚至5个div并排排列的最佳方式是什么？每一个之间都有一个空间将它们分开

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

谢谢

试试这个：

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

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

我用这个：

---

是否有类似的情况：

div.container { display:table; border-spacing:{your-space}px; }
div.container > div { display:table-cell; }

在你的“这么多不同的答案”中

对于今天来说，它是制作块元素水平行最可靠的方法

直到CSS工作组接受：）

另一个选项：

三、三、三、三、三、三、三、三、三、三、三
#划船{
空白：nowrap；
}
#行>分区{
背景：浅蓝色；
显示：内联块；
高度：50px；
宽度：50px；
}
#行>分区+分区{
左边距：10px
}

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

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>

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

---

嗨，我真的不明白你想做什么，你能提供一个非常简单的代码例子，3个div相邻排列吗？谢谢你的回答，你能告诉我这里发生了什么吗？我不熟悉这种样式的CSS。Thank很好地介绍了各种技巧。您还可以考虑从响应设计框架（如基础）使用网格。

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