簡單的2列div佈局

我想創建一個非常簡單的2列布局，在HTML中浮動div的。問題是以下div，foot總是呈現在right div的右側。我知道我應該在某個地方使用clear聲明，但我不確定哪個地方適合。簡單的2列div佈局

另外，正如您在左邊看到的，我明確指定了left的高度。有沒有辦法將force right設置爲相同的高度而不再指定它？

<div id="main"> 
    <div id="left" style="float: left; width: 150px; background: #DDDDDD; height: 500px;"> 
     left column 
    </div> 

    <div id="right" style="float: left; background: #EEEEEE;"> 
     right column 
    </div> 
</div> 

<div id="foot"> 
    footer 
</div>

來源

2011-07-19 Mike

在foot div上使用clear:both。

對於第二個問題，您可以將main div設置爲具有特定高度，然後將left和right的高度設置爲100％。

來源

2011-07-19 13:51:06

這是你想要的嗎？

#foot{display: block; clear: both;}

來源

2011-07-19 13:53:09 Juraj

不工作，你需要莫還有，'div''自然是'block' – Phil

foot div應該被清除。

#foot { clear: left /* or both */; }

至於等高挑戰，我建議你使用faux-column technique by Roger Johansson。

請記住，主列的內容必須多於次列的內容。如果是這種情況，它將移除500像素的高度限制，並且對於您想要的任何內容都很靈活。

來源

2011-07-19 13:53:17 josemota

你的CSS應該是這樣的：

#foot{ 
    clear: both; 
} 
#left, #right{ 
    float: left; // remove this definiton from tag 
    height: 500px; // remove this definition from tag 
}

希望這有助於

來源

2011-07-19 13:53:48 Nebojsa

創建一個空div，並把它在正確的div略高於主DIV年底結束，並給它的類名clrbth的..

在CSS，你可以將此屬性添加到類

.clrbth { 
clear:both; 
margin:0; 
padding:0; 
}

來源

2011-07-19 16:07:50 monk

簡單的2列div佈局

回答

相關問題