为什么divs的行为如此？

我得到这个问题有时候我的div不像预期的那样。我想要的是他们'流'的布局，因为我明白他们应该但他们不是我只是想知道为什么不。我用firebug来检查CSS，似乎没有任何超出规范的东西，他们正在拾取，但它们不会一个接一个地流动。为什么divs的行为如此？

我在测试网站提供了两套代码之一，该网站正在渲染正确，然后出现问题页面。

代码的div：

<div style="border:solid 1px #c9c9c9; width:100px; height:100px; float:left;"> 
    sss 
</div> 
<div style="border:solid 1px #c9c9c9; width:100px; height:100px; left:20px; position:realtive;"> 
    2 
</div>

产品图Div的流动：

http://i45.tinypic.com/t5k8x1.jpg

PIC单片机的div不流淌

http://i47.tinypic.com/2ewfpz9.jpg

有人知道如何让他们到表现如预期？它的值得指出的是，如果我把一个浮动：留在第二个div这种排序的问题，但这意味着下一个div不会下降到下一行正确....

希望有人可以帮助，非常感谢

来源

2010-01-05 Exitos

您的图像显示不正确，请考虑编辑您的帖子以解决问题。 – 2010-01-05 10:17:35

请将代码剪切并粘贴到您的问题中，以方便人们查看。这两个代码片段看起来与我相同的是正确的？如果是这样，两个效果图之间还有什么不同？ – Paolo 2010-01-05 10:20:21

我怀疑他的差别在于他没有向我们展示！ – Benjol 2010-01-05 10:26:09

float只能“剪切”文本，不能包装盒。而且你的图片都不是这些CSS属性的正确渲染。正确的渲染应该是两个框在同一个地方（重叠），'sss'在边框内，'2'在底部边框下。

在两个div上使用float:left;应该照顾它。

<div style="float:left;">sss</div> 
<div style="float:left;">2</div> 
<div style="clear:both;">the next div</div>

如果东西是跨浏览器出毛病了，请确保您使用的具有普遍默认的CSS，如XHTML 1.1的doctype。否则，你可能想为所有元素生成一个默认样式表。

来源

2010-01-05 10:32:45

Imho尝试添加float两个div，之后，第三个div应该是clear:both。

来源

2010-01-05 10:23:46 IProblemFactory

您可以留下两个div的浮动，并在该元素或CSS第三DIV使其“明确：既” ......

尼斯图像的方式：d如何赫克你让时间反正不清楚。

来源

2010-01-05 10:26:02 Younes

即时通讯困惑我没有看到我的图像有任何问题为什么他们完全不清楚？ – Exitos 2010-02-05 09:36:37

此刻我看不到他们了:)。 – Younes 2010-02-05 10:47:54

为什么divs的行为如此？

回答

相关问题