HTML/CSS：將浮左元素展開爲父類的剩餘寬度

對於我的生活，我無法弄清楚這一點。我有一個特定寬度的容器div。裏面還有一些小孩子。我希望最後一個div擴大其寬度以填充容器中剩餘的剩餘寬度。我怎樣才能做到這一點？HTML/CSS：將浮左元素展開爲父類的剩餘寬度

下面是一個例子（也是在http://jsfiddle.net/nbKAr/）：

#container { 
 
    width:200px; 
 
    border: 1px solid red; 
 
} 
 
    
 
#container div { 
 
    float:left; 
 
    border: 1px solid black; 
 
}

<div id="container"> 
 
    <div>a</div> 
 
    <div>b</div> 
 
    <div id="expandMe">expand me</div> 
 
</div>

比方說，用「A」和「B」的div結合起來，50像素的總寬度。如何在不使用JavaScript的情況下製作#expandMe 150px？

來源

2010-09-14 Foobarbis

你知道，所有的元素將其父內不適合包裝？ – Larsenal 2010-09-14 23:17:01

-1

不能沒有Javascript完成。

您可能會發現一些巧妙的方式來實現外觀，但沒有可靠的方法來完成您所描述的內容。

來源

2010-09-14 23:12:34 Larsenal

Larsenal是對的，這不能用div來完成。你可以去舊學校並使用一張桌子，或者只是稍微決定一點，並定義寬度。

來源

2010-09-14 23:14:51 jhanifen

如果您將float從最後一項中刪除，使用#expandMe，然後將overflow:auto;應用於它，我想您會得到您要的。

overflow: auto;浮動後的元素將導致最後一個元素填充剩餘空間。

Here is my sample.

來源

2012-05-27 16:39:58

HTML/CSS：將浮左元素展開爲父類的剩餘寬度

回答

相關問題