Как использовать CSS для позиционирования div?

Question

У меня есть HTML, который выглядит примерно так

<div>
  <div id="header"></div>
  <div id="chart"></div>
  <div id="legend"></div>
  <div id="info1"></div>
  <div id="info2"></div>
  <div id="info3"></div>
</div>

Я бы хотел расположить элементы следующим образом:

Как в мире я могу это делать?

Редактировать: Это вопрос о "правильном способе сделать это", и он, безусловно, не легко Google. По сути, вместо того, чтобы определять столбцы в html, я хочу определить высоту контейнера div, а затем сделать так, чтобы другие элементы div сами располагались внутри него.

Answer 1

Проблема в том, что в итоге вы вводите логику макета в html.

Хорошо заметили!

Дело в том, что CSS Positioning не является мощным средством для выполнения всех возможных макетов, особенно когда вы имеете дело со сложными жидкостными макетами и двойным, особенно когда, как кажется, в вашем примере, вы хотите связать высоты несвязанные, основанные на размере элементы вместе.

Да, есть обходные пути для многих распространенных ситуаций, таких как взломы и сетки "столбцов одинаковой высоты", сделанные из вложенных операций с плавающей точкой и очисток. Но это почти всегда требует, чтобы разметка была адаптирована к макету. Иногда вы можете скрыть это, думая о «хороших» именах классов, которые описывают, как связаны элементы; чаще вы в конечном итоге с гадостью, как class="left_column".

Простые макеты могут быть сделаны с относительно небольшим количеством поддельных упаковок и переупорядочений, так что они все же получаются немного лучше, чем таблицы. Но для материала переменного размера, как, например, ваш пример, это не совсем возможно; То, что хаки существуют, в конечном итоге будет более глубоким и менее обслуживаемым, чем просто использование таблицы. Так что продолжайте вгибать их в таблицу, пока вы используете table-layout: fixed, чтобы сделать их стабильными и быстрыми для рендеринга, и не начинайте вложение таблиц, таких как ужасы Netscape 4 прошлых лет.

Пока CSS не предоставит Святой Грааль полной независимости макета / разметки - и это то, что CSS3 может предоставить через несколько десятилетий! - вам все еще иногда придется использовать стол. В этом нет ничего постыдного.

Answer 2

Я не вижу HTML в вашем вопросе.

Ответ на ваш вопрос зависит от того, хотите ли вы жидкость или статический дизайн.