Question

我有一个像这样的HTML：这个想法是div在左边浮动，当有超过3个div时。下一行应该从下一行开始。（因为宽度）。这几乎适用于所有浏览器。即使在IE6中。但是当谈到IE7时。它将第4个div放在同一条线上。有什么想法吗？

<div id="content">
    <div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
    </div>
</div>

和css：

#content {
margin:10px auto;
overflow:hidden;
padding:3px 10px;
}

以下是一些图片：有什么想法吗？ IE7 IE7 http://www.suaygiri.com/temp/ie7.jpg

IE8 IE8 The Correct One http://www.suaygiri.com/temp/ie8.jpg

Answer 1

查看您的页面 - 这可能是也可能不是问题，但我注意到您没有合法的DOCTYPE。首先尝试修复它。

我很糟糕 - 我正在看Chrome浏览器而不是来源。 DOCTYPE看起来很好。

Answer 2

尝试位置：相对和显示：内联;到.picture 所有容器也必须有固定的宽度

如果这不起作用，那么你还有其他事情

#content {
margin:10px auto;
overflow:hidden;
padding:3px 10px;
width:960px;

}
.picture{
float:left;
width:320px;
position:relative;
display:inline;
}

编辑：我没有注意到额外的div ....虽然不应该引起问题。

Answer 3

您是否尝试删除overflow:hidden;属性？

我在Safari中尝试过，删除overflow:hidden;似乎并没有改变布局

（这里没有IE7所以我无法真正测试它）

IE 7表现得很奇怪，还是仅仅是我

3 个答案: