左邊的div浮動，兩個div浮動權HTML5

我已經看到了部分的解決方案在這裏... how to float two divs beside one div? ...但如果你改變股利以B，C，A（見http://jsfiddle.net/4Jpts/3/），它打破。左邊的div浮動，兩個div浮動權HTML5

我的設置：

<div id="page"> 
    <header></header> 
    <nav></nav> 
    <section></section> 
</div>

頁眉和導航應該浮動正下方彼此，科應左浮動。

而且，我不希望環繞HTML5標籤額外的div。

目前正在設法解決這個自己，但想知道如果任何人有什麼建議？

感謝，

史蒂夫

來源

2013-09-29 Stephen Wilson

難道你不能只編輯你的標記作爲第一個孩子的部分？ – Danield

爲什麼不重新安排你的資產淨值，部分頭要像（使用當前的CSS）

<div id="mainContainer"> 
    <div id="divA"></div> 
    <div id="divB"></div> 
    <div id="divC"></div> 
</div>

，但如果你只是想用這種安排有它檢查我的小提琴http://jsfiddle.net/4Jpts/9/

我basicaly所做的就是刪除DIVA左側浮動並清除什麼是對DIVC

來源

2013-09-29 13:07:45

很好用。我已經完成了這一點，雖然浮動的部分離開了，所以我得到的頁面頂部的空間，如果是清除標題，但不是導航...感謝這一點。小號 –

你可能就像進入<BR>標籤一些選擇。但在另一個DIV包裹你的第三格是你能做的最好的事情，並會正常工作與所有瀏覽器。

#mainContainer{ overflow:hidden; } 
#divA{ float:left; width:60%; background:red; height:500px; } 
#divB{ float:right; width:35%; background:yellow; height:200px; margin-bottom:20px} 
#divC{ float:right; width:35%; background:blue; height:100px } 


<div id="mainContainer"> 
    <div id="divB"></div> 
    <div id="divC"></div> 
    <div> 
    <div id="divA"></div> 
    </div> 
</div>

我已經使用很多的選擇，但在包裝容器是你可以相信不會讓它走樣在任何瀏覽器或新版本的瀏覽器還沒有發佈。

來源

2013-09-29 13:00:31

權，我希望我得到了你想要達到什麼是正確的圖像。 http://jsfiddle.net/4Jpts/10/

<div id="mainContainer"> 
<div id="divA"></div> 
<div id="divB"></div> 
<div id="divC"></div> 
</div>

您需要清除。

#mainContainer { 
overflow:hidden; 
} 

#divA { 
float:right; 
width:60%; 
background:red; 
height:500px; 
} 

#divB { 
float:right; 
width:35%; 
background:yellow; 
height:200px; 
margin-bottom:20px; 
clear:right; 
} 

#divC { 
float:left; 
width:35%; 
background:blue; 
height:100px; 
clear:both; 
}

來源

2013-09-29 13:18:05 Arminmsg

左邊的div浮動，兩個div浮動權HTML5

回答

相關問題