Question

在不同的项目中，我学会了两种不同的方法，将两个div彼此水平放置。是一个比另一个更好，还是只是个人品味的问题，或者一个人只是通过事故/纯粹的运气工作？

方法一：

<div style="border:1px solid red;">
    <div style="float:left;">
        first 
    </div>
    <div style="float:left;">
        second
    </div>
    <div style="clear:both;">
</div>

方法二：

<div style="border:1px solid green;">
    <div style="display:inline-block;">
        first 
    </div>
    <div style="display:inline-block;">
        second
    </div>
</div>

Answer 1

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

当您在生命周期中稍后检查一些随机浏览器时，您只能使用inline-block来查找设计中出现的问题。

我通常坚持float，只有float。

Answer 2

两者都是有效的CSS，不会偶然发生 - 这取决于你需要的东西。

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

正如其他人所说，inline-block存在一些问题，最值得注意的是旧的IE不支持（很多）块元素（注意它在内联元素上工作正常，如<span> ）。您可以使用以下hack来解决这个问题：

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

Answer 3

如果您使用的是第二种方法，那么如果您将其转换为内联元素，则使用DIV毫无意义。只需使用SPAN代码。

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

Answer 4

使用Float（第一种方法）。因为它支持所有浏览器并且易于处理。在这里link您可以了解更多

将两个div水平放置在彼此旁边

4 个答案: