19

在两个不同的项目中，我学习了两种将两个divs 水平并排放置的不同方法。是一个比另一个更好，还是只是个人品味的问题，或者一个只是巧合？

方法一：

.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>

4

4 回答 4

10

第一个在较旧的浏览器中得到更广泛的支持，但float通常会导致一些奇怪的行为（不错，不会破坏您的设计，只是有点意外）。

当您inline-block稍后在生命周期中检查一些随机浏览器时，您只会发现设计中有问题。

我通常坚持float，而且只有float。

编辑

差不多 10 年后重新审视这个答案，我现在的建议是坚持flexbox并且只有flexbox. 如果您需要一些练习，请尝试https://flexboxfroggy.com/ 。

于 2012-11-23T08:28:05.047 回答
4

两者都是有效的 CSS，不会意外工作——这取决于你需要什么。

使用floats 时，您需要清除它们（如发布的代码中所示）；使用inline-blocks 时，这不是必需的。此外，您可以使用text-align对齐inline-block元素，而没有float: middle. 您还可以vertical-align根据需要使用该属性对齐框。

正如其他人所说，存在一些问题inline-block，最明显的是旧的 IE 不支持（很多）块元素（请注意，它在内联元素上运行良好，例如<span>）。您可以使用以下 hack 解决此问题：

.selector {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
于 2012-11-23T08:35:36.210 回答
2

使用浮点数（第一种方法）。因为它支持所有浏览器并且易于处理。在这里你可以了解更多的链接

于 2012-11-23T08:32:55.787 回答
1

如果您使用的是第二种方法，那么使用 aDIV如果您将其转换为内联元素是没有意义的。只需使用SPAN标签。

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

于 2012-11-23T08:28:54.470 回答