多個（動態大小的）div如何共享100％的寬度？

我有以下HTML結構：多個（動態大小的）div如何共享100％的寬度？

<div style="width:100%"> 
    <div style="float:left; width:70%"><input /></div> 
    <div style="float:left">element with unknown width</div> 
    <div style="float:left; width=30%"><input /></div> 
    <div style="clear:both" /> 
</div>

我想達成的目標是：

（要求）外的div應該使用屏幕寬度的100％
（要求）三個內部div應該共享這些100％
（要求）第二個div在另外兩個之間佔用未知數量的空間
個兩個輸入字段應該使用所有的剩餘空間，但第一個將收到剩餘的70％，而第三個獲得30％

怎麼能像這樣做呢？

來源

2012-03-05 Roman Flückiger

如果我的計算是正確的，中間div佔0％，你必須做數學權利，例如：30％，30％和40％。如果你真的希望它是動態的條件，請使用javascript – Ibu 2012-03-05 18:36:48

另一個'給我代碼'的問題......噓 – Starx 2012-03-05 18:39:07

這是你的功課嗎？ – 2012-03-05 18:40:45

@RoToRa：謝謝你的提示。我想這是針對此問題的最終解決方案：

分發70:30

<div style="display:table; width:100%"> 
    <div style="display:table-cell; width:70%"> 
    <input style="width:100%"/> 
    </div> 
    <div style="display:table-cell; width:1px"> 
    <a style="white-space:nowrap">Some Text</a> 
    </div> 
    <div style="display:table-cell; width=30%"> 
    <input style="width:100%;" /> 
    </div> 
</div>

解決方案，其中，所述第一輸入字段抓住所有多餘的空間，並最終輸入字段有固定的寬度：

<div style="display:table; width:100%"> 
    <div style="display:table-cell; width:100%"> 
    <input style="width:100%"/> 
    </div> 
    <div style="display:table-cell; width:1px"> 
    <a style="white-space:nowrap">Some Text</a> 
    </div> 
    <div style="display:table-cell; width=100px"> 
    <input style="width:100px;" /> 
    </div> 
</div>

來源

2012-03-06 11:17:05

什麼是確定中間div的寬度？由於我的代表分數會證明我不是一個非常有經驗的開發者，但我認爲這是你問題的關鍵。如果它的腸管無關緊要，那麼中間列的寬度是70％，0％，30％和7％，90％，3％的div比例。在數學上等價於你的問題。所以你的解決方案可能很簡單：

<div style="width:100%"> 
    <div style="float:left; width:7%">Some elements here.</div> 
    <div style="float:left; width:90%">Some more elements here.</div> 
    <div style="float:left; width:3%">Even more elements here.</div> 
</div>

來源

2012-03-05 19:36:09 Erik

當然，你的權利。務實的解決這個問題有許多解決方案。我不得不承認，在這一點上這更像是一個學術問題。我對CSS比較陌生，在我目前正在開發的應用程序中遇到了這個問題。這個要求對我來說似乎是非常基本和常見的，經過一個小時的谷歌搜索，我無法相信沒有找到答案，所以我把它發佈在這裏......希望能夠被一位CSS大師所啓發:-)無論如何，感謝您的回覆！ – 2012-03-05 20:27:43

表應該是邪惡的，但他們似乎解決了這個問題。我仍然有興趣在一個解決方案，而JavaScript或表，如果任何人都可以找到一個...

與分配比例70:30

<table width="100%"> 
    <tr> 
    <td style="width:70%"> 
     <input style="width:100%"/> 
    </td> 
    <td> 
     <a>Some Text</a> 
    </td> 
    <td style="width:30%"> 
     <input style="width:100%"/> 
    </td> 
    </tr> 
</table>

首先輸入字段使用了所有剩餘空間剩餘空間，而最後一個盒子有一個固定的寬度：

<table width="100%"> 
    <tr> 
    <td style="width:100%"> 
     <input style="width:100%"/> 
    </td> 
    <td> 
     <a>Some Text</a> 
    </td> 
    <td style="width:100px"> 
     <input style="width:100px"/> 
    </td> 
    </tr> 
</table>

來源

2012-03-06 10:09:17

您不必使用HTML表格來執行「表格佈局」。使用CSS和'display：table- *'屬性：http://ajaxian.com/archives/display-table – RoToRa 2012-03-06 10:50:02

多個（動態大小的）div如何共享100％的寬度？

回答

相關問題