如何将两个div水平并排放置？

Question

在两个不同的项目中，我学习了两种不同的方法来将两个

元素水平排列在一起。其中一个比另一个更好，还是只是个人口味的问题，或者只是偶然地生效了呢？

第一种方法：

.container,
.div1,
.div2 {
  border: 1px solid red;
}

.div1,
.div2 {
  float: left;
}

<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
  <div style="clear: both;"></div>
</div>

第二种方法：

.container,
.div1,
.div2 {
  border: 1px solid green;
}

.div1,
.div2 {
  display: inline-block;
}

<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
</div>

- Michel

Answer 1

第一个方法在旧版浏览器中得到广泛支持，但是float通常会导致一些奇怪的行为（不是坏的，不会破坏你的设计，只是有点出乎意料）。

你可能要使用inline-block，但最终发现当你在随机的浏览器上检查时，你的设计出现问题了。

我通常只使用float，仅使用float。

编辑

重新访问这个答案，差不多10年后，我的建议现在是坚持使用flexbox，仅使用flexbox。如果需要练习，请尝试https://flexboxfroggy.com/。

- Ben

---

当需要水平对齐两个以上的div时，应该如何处理？例如，如果有三个div怎么办？没有float:middle;对吧？ - Solace

@Zarah - 不幸的是没有 float: middle;（小笑话），对于三个等高列的 div，你需要去谷歌一下，有很多（复杂的）方法。两个 div 是相当简单的：https://dev59.com/U2865IYBdhLWcg3wBJ0q#4031247，基本思路是使用一个浮动的 div 和一个普通的 div，在普通的 div 上放置与浮动 div 一样宽的 margin。 - Ben

非常感谢您的回复。“基本思路是使用浮动div和常规div，在常规div上放置与浮动div一样宽的边距。”-这很有道理。我会去谷歌一下。 - Solace

Answer 2

两种方法都是有效的CSS，不是偶然的——取决于你的需求。

使用float时，需要清除它们（如所发布的代码）；而使用inline-block时，则无需进行此操作。此外，您可以使用text-align来对齐inline-block元素，而没有float: middle。您还可以使用vertical-align属性按需对齐框。

正如其他人所说，inline-block存在一些问题，最明显的是旧版IE不支持它（在块元素上不支持，但在内联元素上，如<span>，支持良好）。通过以下技巧，您可以解决这个问题：

.selector {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

- Alex Gyoshev

Answer 3

使用浮动（第一种方法）。因为它支持所有浏览器，并且易于处理。这里是链接，您可以了解更多信息。

- Selvamani

Answer 4

如果您使用第二种方法，那么如果您将其转换为内联元素，则使用 DIV 没有意义。只需使用 SPAN 标记即可。

因此，如果您要对齐块级元素/标记，请使用第一种方法。

- Jan Hančič

---

好的观点，我没想到。但是如果我想添加填充/边距，Span标签总是会给我带来问题... - Michel