Как вы устанавливаете плавающую ширину div, чтобы заняться оставшимся пространством, не нажав другие divs?

Для части макета, которую я хочу сделать, я хочу использовать три div, все плавающие рядом друг с другом. Левая и правая имеют набор максимальной ширины, который отлично работает, но я хочу, чтобы средний div расширял свою ширину, чтобы заполнить оставшееся пространство. Чтобы уточнить, левая и правая div могут иметь ширину от 0px до максимальной ширины, в зависимости от того, что есть в каждом, и я хочу, чтобы средний div расширял свою ширину так, чтобы он занимал остальную часть пространства, а не используемые divs с обеих сторон.

Теперь проблема заключается в том, что если в среднем div есть много контента, он расширяется и выталкивает правый div на следующую строку, вместо того чтобы поддерживать его с двумя другими.

Здесь css я до сих пор:

#left-column {
 width: auto;
 max-width: 200px;
 height: auto;
 float: left;
}

#middle-column {
 float: left;
 width: auto;
}

#right-column {
 width: auto;
 max-width: 200px;
 height: auto;
 float: right;
}

... и HTML:
  <div id="left-column">...</div>
<div id="middle-column">...</div>
<div id="right-column">...</div>

Я думаю, что это можно сделать, используя таблицу из трех столбцов, одну строку, но я абсолютно НЕ хочу использовать таблицы. Я хочу выполнить как можно больше, используя чистый css.

Спасибо!

Ответы

Ответ 1

Классические поплавки

Если вы заказываете:

<div id="left-column"></div>
<div id="right-column"></div>
<div id="middle-column"></div>

и вы поместите левый столбец влево, а правый столбец вправо, средний столбец должен заполнить оставшееся пространство. У вас будут проблемы с полями, границами и прокладками.

Flexbox

Если вам не нужна поддержка старых браузеров, вы можете использовать flexbox. С flexbox такая структура становится намного проще, и разметку не нужно изменять.

Вам нужно будет выбрать родительский элемент, поэтому в целях этой демонстрации код будет обернут <div class="wrapper">.

.wrapper {
  display: flex;
  flex-direction: row;
  height: 200px;
}

.left {
  background-color: red;
  width: 100px;
}
.middle {
  background-color: green;
  flex: 1;
}
.right {
  background-color: blue;
  width: 100px;
}
<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

Ответ 2

Я не хочу выковывать старый поток здесь, но я искал решение своей проблемы и наткнулся на это, и я подумал, что лучше поделиться с Франциско...

Таблицы - ужасная идея для размещения макета, главная проблема заключается в том, что перед тем, как таблица покажет/отобразит в браузере, она должна отобразить тег </table>.

Не могли бы вы представить, что если бы содержимое столбца Facebook использовало таблицу для его компоновки, для его отображения на экране понадобилось бы много времени, чтобы отображать что-либо на экране, например, при проверке временной шкалы! Другая проблема заключается в том, что таблицы ведут себя по-разному в каждом браузере.

В принципе: <table> для layout = NO!, <table> для перечисления строк данных или информации = YES!