如何多个（动态大小）div共享100％宽度？ [英] How can multiple (dynamically sized) divs share 100% width?

问题描述

我有以下html结构：

I've got following html structure:

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

我想实现的是以下内容：

What I'd like to achieve is the following:

• （要求）外部div应使用屏幕宽度的100％


• （要求）三个内部div应共享这些100％


• （要求）第二个div在其他两个之间占据未​​知数量的空间


• 两个输入字段应该用尽所有剩余的空间，但第一个应该获得剩余的70％，而第三个获得30％

• (Requirement) The outer div should use 100% of the screen width
• (Requirement) The three inner divs should share these 100% among themselves
• (Requirement) The second div, between the two others, occupies an unknown quantity of space
• The two input fields should use up all the remaining space, but the first one shall receive 70% of the remainder, while the third one gets 30%

推荐答案

@RoToRa：感谢您的提示。我想这是这个问题的最终解决方案：

@RoToRa: Thanks for the tip. I guess this is the final solution for this problem:

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

解决方案，其中第一个输入字段占用所有多余空间，最终输入字段具有固定宽度：

Solution, where the first input field grabs all excess space, and the final input field has fixed width:

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

这篇关于如何多个（动态大小）div共享100％宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！