兩列布局不能正常工作

我想使用兩列布局製作一個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

兩列布局不能正常工作

回答

相關問題