如何在兩個div下放置一個div，如果還有另一個div浮在左邊？

這裏是問題，我得到了一個簡單的標記，一個頭，菜單，頁腳和上下文。菜單位於左側，右側是上下文，其中應包含3個div：兩個div應該位於同一行，第三個div應位於其下方。如何在兩個div下放置一個div，如果還有另一個div浮在左邊？

問題是，第三個div得到菜單。

這裏是一個包含註釋的代碼，pelase看看球員 ......我感覺完全註定這一個，沒有任何想法....

<html> 
<head> 
<style> 

div.header{         border:1px  solid black } 
div.menu{clear:both;float:left;    border:1px solid blue} 
div.context{        border:1px  solid #0099CC} 
div.footer{clear:both;      border:1px solid  red} 

div.one {         border:1px  solid yellow} 
div.two {         border:1px  solid purple} 
div.three {         border:1px  solid green} 

</style> 
</head> 

<body> 

<div class="header"> 
    header 
</div> 
<div class="menu"> 
    menu<br>menu<br>menu<br>menu 
</div> 
<div class="context"> 
    <div class="one"  style="float:left">Div 1 <BR>Div 1 <BR>Div 1 </div> 
    <div class="two"  style="">Div 2</div> 
    <div class="three" style="clear:both">Div 3, what the hell are you doing here  under the menu? You should be just under the Div 1!</div> 
</div> 
<div class="footer"> 
    footer 
</div> 

</body> 
</html>

來源

2012-02-18 Anonymous

如果菜單的寬度是固定的（比如200px），則可以使用margin-left:200px作爲div.context來對齊上下文div的內容。

如果你的菜單具有動態寬度，使用這個CSS：

div.menu{ 
border: 1px solid blue; 
display: inline-block;

}

和背景：

div.context { 
border: 1px solid #0099CC; 
display: inline-block;

}

來源

2012-02-18 21:38:00

採取在這個快速查找在博客文章中查看內嵌和塊元素之間的區別。

http://www.techrepublic.com/article/learn-distinctions-between-inline-and-block-html-elements/6094821

默認情況下，HTML中顯示它的三種方式之一元素：

內聯：前或其後放置這些元素不強制新生產線，它僅消耗作爲必要儘可能多的空間。
塊：新行出現在元素之前和之後，它使用可用的全寬度。
隱藏：有一些元素永遠不會在瀏覽器窗口中顯示，如元標記，腳本和樣式部分。

來源

2012-02-19 00:19:29 Will

如何在兩個div下放置一個div，如果還有另一個div浮在左邊？

回答

相關問題