填充父母剩餘寬度的浮動div

如果剩餘至少50px，我如何讓foo填充容器寬度的其餘部分。如果foo> 50像素，它將移動到增加容器高度的新行。這個問題HTML/CSS: Expanding a float-left element to remaining width of parent是一樣的。我拒絕相信這不能沒有JavaScript。來我兄弟。填充父母剩餘寬度的浮動div

.container { 
    width: 300px; 
    min-height: 30px; 
    overflow: auto; 
} 
.child { 
    float: left 
} 
.foo { 
    /* ? */ 
}

來源

2011-11-27 el_pup_le

誰低估了我！？拜託我兄弟！ –

如果剩餘> = 50像素，您希望foo填充容器。如果沒有，會發生什麼，轉到下一行？順便說一句 - 沒有辦法，這是可能的CSS只。 CSS不會做if語句。 – mrtsherman

我爲你撥弄的東西：http://jsfiddle.net/mac_cain13/K5fJP

.foo div有一個min-width，以確保它會轉到下一行有少於50px可用。 overflow: hidden;確保div不在.child div後面。

我添加了一些JavaScript來演示.child變寬時的行爲。點擊.child div將一些像素添加到它的寬度。當.child div需要足夠的空間以至少剩50px時，.foo div會跳到下一行。

純粹的CSS，但只在Safari中測試。 :)

來源

2011-11-27 10:47:05

當你知道其他的寬度時，有CSS的黑客可用。或者你可以使用一張桌子。但是CSS中沒有像「width：100％ - otherelement.width」這樣的概念，這隻適用於JavaScript。

來源

2011-11-27 10:29:26

-1

檢查了這一點

它的工作現在

http://jsfiddle.net/mikulgohil/fdVws/

HTML代碼：

<div class="container"> <div class="child">First</div> <div class="foo">Second</div> </div>

CSS代碼：

.container { 
    width: 300px; 

    overflow: auto; 
    background:#ff00dd; 
} 
.child { 
    float: left; 
    background:#ff0; 
} 
.foo { 
    background:#0033dd; 
}

來源

2011-11-27 10:31:25

那不是你想要的，從.child div中移除背景顏色，你會看到.foo div實際上在.child div後面。 –

http://jsfiddle.net/mikulgohil/fdVws/1/現在檢查，但你不會得到100％寬度的.foo分區 –

這並不真正的工作。如果你讓第二個div更長，它會圍繞第一個而不是右移： '

First

Second Second Second Second Second Second Second Second Second

' –

填充父母剩餘寬度的浮動div

回答

相關問題