使浮動div收縮而不是下降到新線

有沒有什麼辦法可以強制浮動div收縮，而不是去一個新的線？使浮動div收縮而不是下降到新線

我知道我可以在div上設置隱式寬度，但它在菜單上可能有不定數量的項目。如果可能的話，我會盡量保持網站的佈局流暢。

編輯顯示代碼

<html> 
<head> 

    <style type="text/css"> 
    #left{ 
     float: left; 
     border: 1px solid #000; 
    } 

    #right{ 
     float: right; 
     border: 1px solid #000; 
    } 
</style> 

</head> 

<body> 

<div id="left"><p>This div represents the logo</p></div> 
<div id="right"><p>When the window's width is reduced and these divs touch 
    I want this div to shrink instead of falling to the next line. 
    </p> 
</div> 

</body> 

</html>

基本上，我希望當收縮在瀏覽器窗口，而不是具有其第一掉線，則收縮時被進一步調整窗口大小#right開始收縮。

來源

2010-11-26 George Kendros

浮動一個DIv的效果之一是它縮小到它的內在寬度，所以你需要顯示一些代碼，以便我們可以計算出它爲什麼也會進入一個新行。 – 2010-11-26 02:29:40

我編輯了上面的帖子並添加了一些示例代碼。 – 2010-11-26 02:57:51

您是否嘗試過試驗這些兩個div相對（如百分比）寬度？

如果在未明確聲明寬度的情況下進行浮動，無論是固定的還是相對的，尺寸將默認爲「自動」。 Auto會強制div成爲其內容的寬度。當瀏覽器縮小時，內容仍然會強制這些框到那個寬度，直到通過觸摸另一個元素來強制它崩潰。

使用自動寬度不是在佈局中實現流動性的最佳方法。你需要在某處指定某種相對維度，否則這個問題將是完全不可避免的。

有很多資源可以幫助您實現更流暢的佈局（www.alistapart.com上的很多文章都對此進行了相當深入的討論）。

來源

2010-11-26 23:24:02 Jon

CSS的display屬性，將其設置爲inline而div的行爲將類似於span。

來源

2010-11-26 01:17:52 cambraca

它仍然下降到下一行。該行有一個左側浮動元素和右側浮動元素（徽標向左浮動，右側浮動菜單） – 2010-11-26 01:39:59

使浮動div收縮而不是下降到新線

回答

相關問題