如何拉伸兩個div元素以填充可用的水平空間？

我真的希望你能幫助我。如何拉伸兩個div元素以填充可用的水平空間？

我創建了this fiddle來展示我想要做的事情。

我的問題是：如何拉伸兩個div元素來填充可用的水平空間？

正如你所看到的，有5個div元素串在一起，由div元素包裹，我用100％設置背景顏色和寬度。

有三個寬度爲50px的div元素。

其他兩個div元素的寬度應該填充到其餘可用空間中，它們應該具有相同的寬度 - 對於每個div，都應該有> 50％的寬度。

我的問題是這兩個div元素的50％達到100％的總寬度。而不是一個可用的空間寬度。

我試圖不使用表格等

讓我知道如果有什麼不清楚。

編輯： I'd like to hear your comments about this way.

來源

2010-12-02 Teleport

只要您不介意不支持IE6，使用`display：table-cell`就是正確的選擇。可能僅在IE6樣式表中提供替代方法。 – RoToRa 2010-12-02 14:50:19

的一種方式把你的div看作桌子的單元格。表格的獨特屬性是單元格將填充表格的寬度，而不管你給它們的寬度是多少。通過給一些單元格寬度，其他單元格將填充剩餘的空間。通過使用display:table和display:table-cell，你可以利用這一點而不需要改變你的html。看看這個例子：

http://jsfiddle.net/GyxWm/

我沒有測試這一點，但它應該在所有的「當前」瀏覽器。它應該在IE8 +中工作，但在IE7中可能不起作用，並且肯定不會在IE6中工作。

來源

2010-12-02 14:44:00

太棒了。我上面發佈了一個幾乎類似的解決方案。我不知道顯示：table-cell;自我擴張。輝煌。 – Teleport 2010-12-02 14:45:51

-2

怕我不認爲你可以。

的float:left;去除內含div您的代碼和所有元素下最終彼此，一旦元件離開屏幕的右側，它包裝下方留下的空間（有點像相對定位一樣）。

此外，您正試圖比較固定寬度和可變寬度，這幾乎是不可能的。

如果你到這裏看看：http://jsfiddle.net/P5Kjh/5/

首先我減少你的代碼返回2周的div並得到了工作。

我已將overflow:hidden添加到backgroundG類，以確保存在灰色背景並將兩個div都左移。

然後我設置寬度，累積總數必須在100％左右，如果您爲每個元素添加邊框，您需要以較小的百分比工作。

然後我在新的backgroundG元素中添加了其他3元素，併爲fillup元素創建了separte類，因此它將是80％（不帶邊框）。

可能不會幫助你很多。對不起，不好意思

乾杯

來源

2010-12-02 14:07:10

感謝您的回答，並感謝您使用float：left;鐘聲響了起來。我現在在上面，並會告訴你它是否成功:-) – Teleport 2010-12-02 14:11:29

-1

你可以用javascript的幫助。更改div標籤是這樣的：
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>

並添加這個JavaScript這些標籤後somehwere：


    var elem1 = document.getElementById("part1"); 
    elem1.style.width = (screen.width - 150)/2; 
    var elem2 = document.getElementById("part2"); 
    elem2.style.width = (screen.width - 150)/2;

而且從sectionFillUp在CSS刪除width:50%;解決這個是

來源

2010-12-02 14:14:28 Caner

這很聰明。但不幸的是，我正在尋找一個純粹的CSS解決方案。 – Teleport 2010-12-02 14:16:42

如何拉伸兩個div元素以填充可用的水平空間？

回答

相關問題