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，在另外两个之间，占据未知数量的空间
两个输入字段应占用剩余的所有空间，但第一个应占余数的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>

Answer 2

什么是中间div的宽度？由于我的代表得分最高，我不是一个非常有经验的开发人员，但我认为这是你问题的症结所在。如果它在中间柱的宽度是什么并不重要，那么div比率为70％，0％，30％和7％，90％，3％。在数学上是对你的问题的等价答案。所以你的解决方案可以简单：

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

Answer 3

表应该是邪恶的，但它们似乎解决了这个问题。我仍然对没有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>

多个（动态大小）div如何共享100％宽度？

3 个答案: