CSS Несколько многостолбцовых дивов - PullRequest
Новая
       8

CSS Несколько многостолбцовых дивов

2 голосов
/ 12 апреля 2010

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

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

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

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

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

Но все перекрывают друг друга.

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

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

Ответы [ 2 ]

2 голосов
/ 12 апреля 2010

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

#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, чтобы получить содержимое в правой строке / столбце.

0 голосов
/ 12 апреля 2010

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

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

...