如何使兩個浮動（一個向右，一個向左）如果容器div調整得太小，div不會「跳」？

這個問題聽起來很複雜，但這裏是HTML，說明它：如何使兩個浮動（一個向右，一個向左）如果容器div調整得太小，div不會「跳」？

<div id="contained" style="overflow: hidden"> 
<div id="float-right" style="float: right; width: 100px">floated-right</div> 
<div id="float-left" style="float: left; width: 200px">floated-left</div> 

<div style="clear: both"></div> 
</div>

如果我調整#contained不到300px然後#float-left跳到下方，不再可見。

問題是：如果我將#contained調整爲小於300px，我該如何防止#float-left消失？如果#contained小於300px，我如何使#float-right和#float-left「粘在一起」？

來源

2015-08-20 bodacydo

您可以在浮動div上使用媒體查詢和最大寬度 –

浮動div widht不會更改。你的意思是在集裝箱嗎？它的寬度實際上還沒有定義，它的變化是更多的元素被添加到浮動的右側或左側浮動。最大的問題是如何使浮動元素不會溢出容器。 – bodacydo

然後一個媒體查詢，刪除浮動並更改div顯示：內聯塊 –

這是不可能的，以防止#float-left從消失當容器#contained調整爲小於300px - 和具有overflow:hidden和固定高度（大概） - 因爲#float-left和#float-right具有固定的100px和200px寬度。如果你想讓他們保持並排，你需要給他們百分比的寬度。如果你給#containerheight: auto，你也可以讓它們堆疊在一起。

<div id="contained" style="overflow: hidden"> 
<div id="float-right" style="float: right; width: 33.3%">floated-right</div> 
<div id="float-left" style="float: left; width: 66.6%">floated-left</div> 

<div style="clear: both"></div> 
</div>

來源

2015-08-20 17:35:15 kisabelle

謝謝我會試試這個。雖然重新調整0.1％呢？ – bodacydo

您可以嘗試使小數點後兩位（例如33.33％和66.66％）靠近，但我建議您測試一下，以確保div在所有瀏覽器中都能並排放置。 – kisabelle

謝謝！我想我會去34％和66％，這樣才100％準確。 :) – bodacydo

您可以使用媒體查詢更改頁面低於某個寬度時的樣式。例如：

body { margin: 0; padding: 0; } 
 

 
#contained { overflow: hidden; background: #f8f8f8; } 
 
#float-right { float: right; width: 200px; background: #ffc; } 
 
#float-left { float: left; width: 300px; background: #ccf; } 
 

 
@media (max-width: 500px) { 
 
    
 
    #float-right { width: 33.33%; } 
 
    #float-left { width: 66.66%; } 
 
    
 
}

<div id="contained"> 
 
<div id="float-right">floated-right</div> 
 
<div id="float-left">floated-left</div> 
 
</div>

注意：您不需要容器內的清除元件，如overflow風格將使其含有它的孩子。

來源

2015-08-20 17:46:24 Guffa

如何使兩個浮動（一個向右，一個向左）如果容器div調整得太小，div不會「跳」？

回答

相關問題