两列布局无法正常工作

Question

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

我在jsfiddle中有一个版本

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

我无法为内部容器设置上边距。尽管我给了innerContainer一个上边距但它没有反映在页面中。

我使用内部容器包含左侧边栏和innerContainer的原因是在实际页面中我在内部容器中并排有两个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;

}

我认为这可以解决您的问题。 请告诉我结果是什么。