多个（动态大小的）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％的宽度？

回答

相关问题