两列布局不能正常工作

我想使用两列布局制作一个HTML页面。两列布局不能正常工作

我在的jsfiddle

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

我不能设置上边距为内container.Though我已经给了innerContainer顶利润率版本它不是反映在页。

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

来源

2012-01-31 Bobby Francis Joseph

请始终在您的问题中放置相关代码。链接很棒，但如果它们消失了，那么问题就不再对别人有用了。 – 2012-01-31 04:28:55

你的问题是保证金折叠。您可以通过使用边框或填充来防止边距塌陷。这里有一个很好的解释：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; 
}

来源

2012-01-31 04:33:11

谢谢。问题已修复。因此，由于边缘塌陷，垂直并排放置的两个边缘值中的较大值被采用。由于这是父母和孩子的情况，因此应用较大的保证金。只要看看这个。 http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/61/在这种情况下，我只在innerContainer上应用了150px的顶部边距。但是，发生的是两个值中较大的一个（150px，从0和150px）被选中并应用到父级（outerContainer）。我的观察结果是否正确？只是确认我的理解。 – 2012-01-31 09:42:38

是的，并且在父项目上放置边框或填充将会停止合拢并导致边缘被独立处理。 – 2012-01-31 13:56:43

首先结束div的缺少开幕。然后我在outerContainer中添加了10px的padding-top。

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

}

我认为这会解决您的问题。请让我知道结果是什么。

来源

2012-01-31 04:40:19

嘿，你刚刚从@James – Murtaza 2012-01-31 04:48:38

复制了答案，可能是@詹姆斯和我在这个问题上同时工作。 – 2012-02-03 03:45:19

两列布局不能正常工作

回答

相关问题