两列布局无法正常工作

Question

我正在尝试使用两列布局制作 HTML 页面。

中有一个版本

我在 jsfiddle http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/

我无法为内部容器设置上边距。尽管我已经为内部容器指定了上边距，但它并未反映在页面中。

我使用内部容器来包含左侧栏和内部容器的原因是，在实际页面中，我在内部容器中并排有两个 div。因此，我不喜欢使用三列布局。

Answer 1

您的问题是保证金崩溃。您可以使用边框或填充来防止边距折叠。这里有一个很好的解释： http://reference.sitepoint.com/css/collapsingmargins

http://jsfiddle.net/eFMpJ/46/

#outerContainer
{
   background-color:#FFF000;
   margin:10px 10px 10px 10px;

   border-top: 1px solid black;
   // or padding-top: 1px;
}

Answer 2

首先，开头的结尾 div 丢失了。
然后我在outerContainer中添加了10px的padding-top。

#outerContainer
{
   background-color:#FFF000;
   margin:10px 10px 10px 10px;
   padding-top: 10px;

}

我想这会解决你的问题。
请让我知道结果是什么。