html - 在 Firefox 中，DIV 不会一直向左浮动

Question

我有以下代码：

<div style="width:560px">
    <div style="float: left; width: 50%; margin-bottom: 20px">
        <div style="float: left; width: 40%">
            <!-- Thumbnail -->
        </div>
        <div style="float: left; width: 60%">
            <!-- Title -->
            <!-- Author -->
            <!-- Price -->
            <!-- Quantity -->
            <!-- Add to Cart -->
        </div>
    </div>
</div>

这是它的样子Chrome：

但这就是它的样子Firefox：

如何让 Firefox 像 Chrome 一样显示？

Answer 1

编辑：睡前阅读：960 网格系统

这是由于第一个元素的高度在 Firefox 中“推动”了第三个元素，但在 Chrome 中没有。为什么会这样，我不知道。当不使用固定高度时，这是一个常见问题，在我看来，避免这种做法也是一种很好的做法，因为您永远无法真正判断某物的高度。

我可以建议对布局进行一些解决方法吗？它稍微手动一些，但会确保“行状”布局。通过简单地添加一个rowdiv，它将允许您确保至少有 2 个项目连续，就像这样。

<div id="container">
    <div class="row">
        <div class="item">Item 1...</div>
        <div class="item">Item 2...</div>
    </div>
    <div class="row">
        <div class="item">Item 3...</div>
        <div class="item">Item 4...</div>
    </div>
    <div class="row">
        <div class="item">Item 5...</div>
        <div class="item">Item 6...</div>
    </div>
</div>

为了“推动”新行开始，您需要在row课堂上清除两者。

优点：

• 将始终有 2 个项目连续
• 项目将始终从顶部开始级别

缺点

• 将其更改为x每行项目将需要 HTML 更改

Answer 2

您应该始终使用 CSS 重置。它有助于完全避免这些问题。我个人使用的是这个： http ://html5reset.org/

干杯，罗宾