在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

编辑：睡前阅读：The 960 Grid System

这是由于第一个元素在Firefox中“推”第三个元素的高度，而不是在Chrome中。为什么会这样，我不知道。这是一个常见的问题，当没有使用固定高度时，我认为这是一个很好的做法，因为你可以从不真正告诉它有多高。

我可以建议对布局稍作解决。它略微更加手动，但会确保“行式”布局。只需添加一个row div，就可以确保连续至少有两个项目，就像这样。

<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类上清除这两行。

<强>优点：

• 连续两件事
• 项目将始终从顶部开始

<强>缺点

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

Answer 2

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

干杯， 罗宾