CSS Несколько многоколоночных div

У меня есть куча элементов (текст, изображение, смешанный контент и т. д.), которые я хочу отобразить. Пользователь может определить, в какой строке и в каком столбце появляется этот элемент. Например, в строке 1 может быть два элемента/столбца, оба изображения. Во второй строке может быть три элемента/столбца, один с изображением, два других в виде чистого текста. Да, и пользователь может указать ширину любого конкретного столбца/изображения/элемента.

У меня есть решение, которое использует несколько таблиц, которые работают. По сути, каждая строка — это новая таблица. Это работает по большей части.

Мне интересно, могу ли я использовать только div?

Теперь моего CSS foo не хватает, и я попытался скопировать примеры из Интернета, и мне не удалось заставить его работать. Прямо сейчас у меня есть что-то вроде этого:

[for each row]
  [div style="float: none"]
  [for each column]
    [div style="float: left"]
      [content]
    [/div]
[/div]
[br]

Но все накладывается друг на друга.

Я также пытался использовать «позиция: относительная», но все выглядит еще более скучно.

Так можно ли использовать div для нескольких строк и разного количества столбцов?


html css css-tables
person accelerate    schedule 12.04.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Они точно могут! Основной эффект (звучит так), который вы ищете, выглядит так:

#wrapper {
    width: 900px;
}
    
.item {
    height: 200px;
    width: 200px;
    margin: 10px;
    float: left;
}
<div id="wrapper">
    <div class="item">Something</div>
    <div class="item">Something else</div>
    <div class="item">Something cool</div>
    <div class="item">Something sweet</div>
    <div class="item">Something just ok</div>
</div>

Итак, что нужно сделать, это настроить контейнер фиксированной ширины (#wrapper) и заполнить его «блоками». Поскольку каждый из них имеет фиксированную ширину и плавает влево, они выстроятся в сетку. Из-за ширины/поля, которые я установил для каждого, вы должны получить 4 на строку. Если вам нужны разделители, просто вставьте пустые DIV, чтобы содержимое попало в нужную строку/столбец.

person Alex Mcp    schedule 12.04.2010
comment
Возможно, стоит использовать overflow: hidden в .item, поскольку IE6 не всегда учитывает объявления ширины, если содержимое в них больше, чем контейнер (хотя IE7/8, я думаю, более совместимы) - person cryo; 12.04.2010
comment
Не добавляйте элемент ‹br /› под div, если данные повторяются из БАЗЫ ДАННЫХ с использованием цикла while или for. - person hoyt.dev; 04.06.2011

arrow_upward
0
arrow_downward

Система 960 Grid предназначена именно для таких задач. Взгляните на http://960.gs/, там есть множество примеров того, что вы можете делать с 960.

Для непосвященных он определяет два типа макетов: 12 столбцов или 16 столбцов. Каждый столбец имеет предопределенную ширину с предопределенными промежутками между ними. Затем вы можете использовать встроенные стили css, чтобы div охватывал любое количество столбцов. Это невероятно мощно для макетов, где разные разделы страницы используют разные макеты.

person vfilby    schedule 12.04.2010