为什么内部div显示在容器div下面？

Question

有人可以解释为什么我的文章div出现在我的侧栏div下面吗？

http://www.api.jonathanlyon.com/getpocket/view.html

您需要先在下拉列表中选择一个项目

由于

乔纳森

Answer 1

摆脱float:left和container div上的articles

Answer 2

删除'container'div上的float属性，它将正常工作。

[edit]'bigcontainer'上的float属性也是不必要的。

此问题的原因可能如下：计算封闭元素的尺寸时会忽略浮动元素。你已经浮动'lsidebar'和'container'，所以'bigcontainer'中没有任何东西，其计算宽度为零。因此，当放置'container'元素时，封闭的'bigcontainer'元素中没有剩余的水平空间，因此它被放置在'lsidebar'元素下面。

Answer 3

根据我的关注，标记应该是这样的：

<div id="mainWrap">
<div id="sidebar">
</div>
<div id="article">
</div>
</div>

它的造型应该是这样的

#mainWrap{
#some basic styling like width 
}
#sidebar{
#some basic styling like width and float:left
}
#article{
#some basic styling like width and float:right
}

按照标准标记和css标准。

在你的情况下，容器有 float：left ，而且太大了，这就是它失败的原因。 删除 float：left ，就可以了。

谢谢！

Answer 4

这是因为<div id="container">宽度过大。缩小宽度，它将显示在侧边栏的旁边。