Как охватить столбцы таблицей на основе div?

Question

Я хотел бы, чтобы ячейка проходила через два столбца с двумя ячейками под ней. Как мне сделать это в CSS с <div> элементами? Это должно быть эквивалентно:

<table>
  <tr>
    <td colspan="2">Major column</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
  </tr>
</table>

Обратите внимание, что C1 и C2 не обязательно должны составлять 50% каждый. Значение может меняться в зависимости от их содержимого. Мне также нужны все элементы в этих ячейках, независимо от того, сколько строк выстроено, как в таблице.

Answer 1

Вы хотели бы разметку, как:

<div class="main">
    <div class="topRow">Major column</div>
    <div class="leftCol">C1</div>
    <div class="rightCol">C2</div>
<div>

А затем несколько CSS, чтобы расположить их:

div.topRow {
  width:100%;
  clear:both;
}
div.leftCol {
  width:50%;
  float:left;
}
div.rightCol {
  width:50%;
  float:right;
}

Answer 2

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

HTML:

<div> full width </div>
<div class="column50"> left </div>
<div class="column50"> right </div>

CSS:

div.column50 {
    float: left;
    width: 50%;
}

В случае, если неясно, нет необходимости создавать два отдельных класса CSS для этого случая. Оба последних двух div имеют ширину 50%, без полей и без отступов. Установка ширины 50% и левого числа с плавающей точкой имеет тот же эффект, что и установка правой с плавающей точкой справа.

Answer 3

"Обратите внимание, что C1 и C2 не являются обязательно будет 50% каждый. значение может меняться в зависимости от их содержание. Мне также нужны все предметы в эти клетки независимо от того, сколько строк там выстраиваться так же, как они будет в таблице. "

Вышеуказанное невозможно в кросс-браузерном режиме без использования таблицы (макет таблицы можно смоделировать с помощью CSS: «display: table», но это не работает в IE6 или IE7).

Я бы посоветовал вам думать немного иначе, когда вы разрабатываете с помощью CSS вместо таблиц, невозможно просто заменить "tr" и "td" на "div" и заставить вещи работать магически, как раньше Я предлагаю вам установить ширину нижних «ячеек» и использовать один из вариантов, которые вам дали выше.

Надеюсь, это поможет!

Answer 4

Все вышеперечисленное будет работать, но имейте в виду, что элементы будут "выходить" из родительского элемента div в IE6. Это боль, но большинство людей все еще должны думать о поддержке IE6.

Решение побега состоит в том, чтобы придать содержащему элементу высоту или ширину (любой подойдет, он растянется, чтобы соответствовать, поэтому обычно я использую 1%).

Кроме того, если вы устанавливаете ширину, имейте в виду, что любые установленные вами границы или поля равны в дополнение к ширине элементов, поэтому если вы установите два деления в 50% с рамкой или полем, Вы получите разрыв строки.