Заставить DIV вести себя как таблицы

Question

Можно ли создать, например, сетку 2x2 с элементами div, которые ведут себя как таблица, когда дело доходит до изменения размера, чтобы соответствовать содержимому?

Как это

+-----------+
|  1  |  2  |
-------------
|  3  |  4  |
+-----------+

Так, например, если выНапишите что-нибудь в ячейку # 1, и ширина увеличится, чтобы соответствовать содержимому, ячейка # 3 будет изменена, чтобы она имела ту же ширину, что и # 1.И то же самое для высоты, поэтому, если вы поместите разрывы строк в # 1 и рост увеличится, # 2 тоже получит ту же высоту.

Я знаю, что это можно сделать с помощью display: table, table-row, table-cell, но IE7не поддерживает их.Есть ли обходные пути (без JS) или другое решение?

Answer 1

Помимо размещения таблицы внутри самого div или 4 других div внутри div, есть свойство CSS3 Grid Column, но в настоящее время оно не поддерживается ни одним из основных браузеров, вы можете увидеть информацию здесь

Единственная известная мне альтернатива (которую я использую на 1 сайте) поддерживается во всех браузерах, кроме IE, свойство CSS3 Multiple Columns . Я вкладываю 2 div в контейнер div, 1 top и 1 down, затем использую это свойство.

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

Answer 2

Вы всегда можете использовать классы css display: table, display: table-row, display: table-cell, чтобы div действовал как таблица

.tableClass{
  display : table;
 }
.row{
 display : table-row;
 }
.cell{
  dispaly : table-cell;
 }