Организация нескольких делений, как лучше всего обрабатывать макет

Question

По сути, я хотел бы выложить несколько div-ов в master-div для имитации таблицы.

Единственное отличие состоит в том, что иногда "столбец" должен иметь другой размер в зависимости от "строки". Поэтому я пытаюсь выяснить, как лучше расположить div. Должен ли я плавать divs, abs позиции и т. Д ...

Я просто подумал о другом способе. Должен ли я сделать один div на строку, а затем каждый «столбец» span?

Answer 1

Если вы просто хотите вывести небольшой объем данных, почему бы не использовать таблицу? Таблицы в порядке для табличных данных.

Answer 2

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

Answer 3

Я бы сказал, чтобы организовать div в виде таблицы, которую вы хотите:

Сделайте так, чтобы ваш мастер div имел стиль CSS примерно так:

позиция: абсолютная;
топ: 0px;
Слева направо: 0px;

Ваша верхняя левая ячейка будет иметь такой стиль:

позиция: относительная;
верх: 10px;
слева: 10px;
ширина: 50px;
высота: 100px;

Первая клетка будет расположена в 10 пикселях от верхнего левого угла и будет иметь размеры 50 пикселей в ширину и 100 пикселей в высоту.

Затем ваша верхняя правая ячейка будет иметь такой стиль:

позиция: относительная;
верх: 10px;
слева: 70px;
ширина: 50px;
высота: 100px;

Это поместит верхнюю правую ячейку в 10px сверху и в 70px слева от главного div (что будет 10px от правого края верхней левой ячейки).

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

Answer 4

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

То, что вы хотите, это в основном система компоновки сетки. Для этого существует рабочий проект CSS3 , но, естественно, он еще не реализован. Возможно, вы захотите взглянуть на системы разметки сетки, такие как blueprint , yui-grids или 960gs .

Answer 5

Если данные являются табличными данными (которые включают в себя формы IMO), то используйте таблицу, для чего, как ни странно, нужен тег таблицы.

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