С кучей div, плавающих влево, выстроенных в столбцы с разной высотой, они не создают красивую сетку без установки высоты

Question

Я пытаюсь создать систему, похожую на сетку, с элементами div с плавающим слева содержимым. Проблема заключается в том, что высота каждого элемента div не является статической, поскольку содержимое каждого элемента отличается. Так как высота различна .. вещи выходят из строя, если один выше другого в одном ряду.

Есть ли какой-нибудь способ css или js (предпочитают javascript) способ обойти это. Я действительно хочу избежать установки больших высот на div'ах, чтобы они выстраивались в линию.

Вы можете увидеть пример здесь: http://www.foreclosurejournalinc.com/index.php?option=com_hotproperty&view=type&id=1

Answer 1

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

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

Гибкая разметка

ОК - давайте посмотрим на вашу разметку. На данный момент у вас почти есть структура таблицы, потому что вы упаковываете каждую строку в DIV. Опять же, это означает, что вы не можете иметь один столбец или 3 или 4 столбца рядом.

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

<ol id="list_properties">

  <li class="property">
    <h3 class="propertyTitle"><a href="#">08-CA-001731</a></h3>
    <dl class="details">
      <dt>Plantiff</dt>
      <dd>Bob's Mortgages</dd>
      <dt>Defendant</dt>
      <dd>Harry Skinflint</dd>
    </dl>
  </li>

  <li class="property">
    <h3 class="propertyTitle"><a href="#">08-CA-001731</a></h3>
    <dl class="details">
      <dt>Plantiff</dt>
      <dd>Bob's Mortgages</dd>
      <dt>Defendant</dt>
      <dd>Harry Skinflint</dd>
    </dl>
  </li>

</ol>

У вас будет один <li class="property"> на элемент в вашей «сетке». Я также предложил более приятную разметку для деталей - если хотите, помогите себе в этом.

Теперь, чтобы закончить: к сожалению, это не может быть сделано кросс-браузерным способом без некоторой окончательной настройки с Javascript. Тем не менее, JS является ненавязчивым, так что в конце концов он действует только как немного отполированный.

Базовое моделирование

Ваши базовые стили будут выглядеть так:

#list_properties {
  list-style:none;
  margin:0;
  padding:0;
  width:960px;
  float:left;
}

#list_properties li.property{
  width:430px;
  float:left;
  margin:0 50px 50px 0;
  min-height:16em; /* For FF, Safari, Opera, IE8 */
  _height:16em; /* For IE6 */
  *height:16em; /* For IE7 */
}

Это воссоздает столбцы - на этом этапе, если все ящики имеют высоту менее 16em, это все, что вам нужно.

Javascript польский

Чтобы убедиться, что все отлично, я бы использовал плагин равных высот для jQuery: http://www.cssnewbie.com/equalheights-jquery-plugin/ По сути, вы передаете ему свой контейнер (#list_properties), и он сканирует каждого из дочерних элементов (li.property). ) и устанавливает высоту каждого из них на высоту самого высокого элемента.

Так, например, один элемент имеет дополнительную информацию и ему требуется высота в 18 ems, для всех остальных элементов также установлено значение 18em.

На связанном сайте есть документация, чтобы начать работу, но как только у вас есть jquery и готовый плагин, вам нужно всего лишь сделать:

$(function(){
  $('#list_properties').equalHeights();
});

Как только вы настроите его таким образом, вы можете изменить количество элементов в столбце, просто изменив ширину li.property.

Последняя мысль ...

Я просто думаю, в чем преимущество отображения этого списка в столбцах? В конце концов, пользователь может отсортировать список - не будет ли проще сканировать список из одной колонки? Я предполагаю, что пользователь будет искать определенный элемент, а не просто просматривать полуслучайно.

Answer 2

Плавающие <div> элементы сложны для работы, особенно если вы нацелены на несколько браузеров.

Если важно, чтобы они выстраивались в сетку, я бы вместо этого использовал <table>; <div> s предназначены для динамического контента, который может совпадать или не совпадать со всем остальным, и кажется неправильным ожидать, что они выровняются идеально, особенно если их размеры не указаны.

Кроме того, поскольку свойство float CSS изменяет взаимодействие элементов уровня блока с другими плавающими и не плавающими элементами, я плаваю элемент <table> и задаю ему ширину набора.

Answer 3

Есть два варианта:

1. Пометьте конец каждой «строки» с помощью <div> или <hr>, который «очищает» обе стороны с помощью атрибута css «clear». Подробнее о хите вы можете узнать здесь: http://www.w3schools.com/Css/pr_class_clear.asp

2. Делайте то, что сказал Пойнти, и используйте CSS-фреймворк. Я бы особенно порекомендовал 960 Grid (http://960.gs) и / или BluePrint CSS (http://code.google.com/p/blueprintcss/).). Оба являются простыми, небольшими и простыми в использовании. Они в основном используют вышеуказанную технику для достижения результата, а также предлагают вам куча других приятных функций (легко создавать симметричные и пропорциональные макеты).

Answer 4

Я думаю, что если вы добавите очищенный элемент после каждых двух записей, это поможет.

<div style="clear:both"></div>

То есть, вы дважды используете hp_prop, затем вставляете очищенный div.

 <br class="clearboth">

не имеет никакого эффекта в той позиции, в которой они у вас есть.

Answer 5

Проверьте CSS display: table; для макета: http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

Answer 6

Возможно, вы захотите взглянуть на некоторые ориентированные на сетку CSS-макеты. Общая идея состоит в том, чтобы иметь набор классов, которые применяются к блокам контента, чтобы вы не пропускали маленькие числа повсюду. Есть разные подходы; поиск в Google для "CSS grid framework" должен помочь вам начать работу.

Вот еще одна идея: вы знаете, сколько таблиц подряд? Ну, разве вы не можете обернуть каждый ряд <div> блоков в другой «ряд» <div>, если этот набор установлен на overflow: hidden, чтобы он растягивался вокруг всплывающих блоков внутри него? Внешние <div> элементы не должны были бы плавать вообще (хотя они могли бы, если необходимо). Это приведет к тому, что каждая строка станет самой большой в ней.