html - 多个(动态大小的)div 如何共享 100% 的宽度？

Question

我有以下 html 结构:

<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，在其他两个 div 之间，占据未知数量的空间
• 两个输入字段应用完所有剩余空间，但第一个应获得剩余空间的 70%，而第三个将获得剩余空间的 30%

这样的事情怎么办？

Answer 1

@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>