Как несколько (динамически изменяемых) элементов 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% ширины экрана
• (Требование) Три внутренних деления должны разделить эти 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

Таблицы должны быть злыми, но, похоже, они решают проблему. Я все еще заинтересован в решении без 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>

Answer 3

Что определяет ширину среднего деления? Поскольку моя оценка репутации будет проверяться, я не очень опытный разработчик, но я думаю, что это суть вашей проблемы. Если это буквально не имеет значения, какова ширина среднего столбца, то отношение деления составляет 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>