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

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.