html - 奇怪的 float 框问题

Question

如果我使用下面的代码:

<table>
    <tr><td>
        <h3>Header</h3>
        <p>varying lines of text</p>
    </td><td>
        <h3>Header</h3>
        <p>varying lines of text</p>
    </td></tr><tr><td>
        <h3>Header</h3>
        <p>varying lines of text</p>
    </td><td>
        <h3>Header</h3>
        <p>varying lines of text</p>
    </td></tr>
</table>

我不会在上面使用 CSS，但随着 future 的发展，我有一种直觉， future 的浏览器会贬低更多表格功能。我正在尝试实现相同的目标，但使用 DIV 标记和 CSS，并且我想让它与旧版 Web 浏览器(如 Internet Explorer 7)兼容。

这是我的代码:

CSS:

.stretch{width:100%;overflow:hidden}
.common{float:left;margin:0.2em;padding:0.1em;width:40%}

HTML:

<div ID="outer" class="stretch">
    <div class="common">
        <h3>Header</h3>
        <p>varying lines of text</p>
    </div>
    <div class="common">
        <h3>Header</h3>
        <p>varying lines of text</p>
    </div>
    <div class="common">
        <h3>Header</h3>
        <p>varying lines of text</p>
    </div>
    <div class="common">
        <h3>Header</h3>
        <p>varying lines of text</p>
    </div>
</div>

我在 firefox 15 和 opera 11.6 中测试了它，在我的 800x600 自然桌面大小上，盒子正确排列。当我在两个浏览器中使用缩放工具缩小以模拟 1024x768 屏幕时，最后两个框没有并排对齐。它更像是一个 3 行乘以两列的网格，其中缺少一些部分。但是，我缩小到 50% 的缩放比例(以模拟 1600x1200 的屏幕)并且框的排列是正确的。

每个框包含可变数量的文本。

为什么会发生这种情况，有没有办法解决这个问题，或者我必须重新使用表格？

Answer 1

我正在接受这个:

<div ID="outer" class="stretch">
<div class="common">
    <h3>Header</h3>
    <p>varying lines of text</p>
</div>
<div class="common">
    <h3>Header</h3>
    <p>varying lines of text</p>
</div>
</div>
<div ID="outer2" class="stretch">
<div class="common">
    <h3>Header</h3>
    <p>varying lines of text</p>
</div>
<div class="common">
    <h3>Header</h3>
    <p>varying lines of text</p>
</div>
</div>

这对我来说效果最好，因为我每个盒子只有一排 div，因此永远不必担心盒子搞砸了。唯一我同意的警告是，在此版本中，使用不同颜色的边框将显示一条贯穿顶部和底部框之间的线。