當浮動div行爲重疊時的變化

我有兩個div。它們都可以包含可變大小的內容。當浮動div行爲重疊時的變化

一個需要向左浮動，另一個需要向右浮動。或者說，需要擁抱父母的左側，另一個是正確的（如果某人有非浮動解決方案）。但是當它們重疊時（即，當瀏覽器縮小到使浮動的左側div與浮動右側接觸的大小）時，我希望它們清除或堆疊一個頂部，就好像它們一樣都沒有足夠的空間來分裂。

這甚至可能嗎？

一些HTML：

<div id="header"> 
    <div id="header-title"> 
     <h1> 
      Title (variable length) 
     </h1> 
    </div> 
    <div id="header-menu"> 
     <h2> 
      Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7 (variable length) 
     </h2> 
    </div> 
</div>

一些CSS：

#header{ 

    overflow:auto; 

} 

#header-title{ 

    float:left; 

} 

#header-menu{ 

    float:right; 

}

值得一提的是，所需的行爲是有點在迴應式網頁設計的領域，但我希望它這樣的行爲沒有@media查詢。最終會使用viewport元標記，但目前我只想讓它在桌面設置中正確響應。

祝你好運...

來源

2013-07-23 shennan

似乎標題是錯誤的。你已經「阻止浮動div從重疊」：http://jsfiddle.net/K8fnc/。您要求的主要功能是「如何在沒有媒體查詢的情況下從浮動權利向浮動權益交換」。我會盡力爲你解答，但我想不到沒有媒體查詢的方式（除非你想要jQuery）。 – LouD

你是對的。我沒有澄清，我更感興趣的是，當他們開始重疊時，左邊的花車對齊。媒體查詢的問題是我必須對浮動div的大小做出假設才能實現它。如果div的總寬度最終只有600px，並且我的'@ media'查詢以480px開頭，則該網站的桌面版本可能會保持正確的div正確，即使它低於我的左div。我認爲可能會有一個良好的包裝結構，也許有一些絕對的定位。 – shennan

這是你的意思嗎？

http://jsfiddle.net/K8fnc/3/

#header{ 

overflow:auto; 

} 

#header-title{ 

    float: left; 
}

如果你拿走浮動：正確的第二個div，它會工作。

來源

2013-07-23 09:01:05 bzupnick

感謝您的輸入，但這不是我正在尋找的內容，因爲文本只是在清除之前儘可能多地包裹'header-left'。根據它有多少空間，我需要它落在右邊或完全落在左邊。 – shennan

當浮動div行爲重疊時的變化

回答

相關問題