html - 为什么内部 div 显示在容器 div 下方？

Question

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

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

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

谢谢

乔纳森

Answer 1

摆脱float:left你container和articlesdiv上的

Answer 2

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

[编辑] '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">宽度太大。减小宽度，它会出现在您的侧边栏旁边。