"Лучше", плавающее в CSS

Я экспериментирую с CSS и свойством float. У меня есть этот "веб-сайт", с большим количеством разделов, согласованных с сеткой 80 пикселей и float: left:

Simple CSS floating

Есть ли способ в CSS, чтобы он выглядел так: чтобы элементы могли использовать пустое пространство над ними?

More compact - uses empty space above the elements

Без JavaScript, если это возможно.

Спасибо, Мартин.

ОТВЕТЫ

Ответ 1

Для разбиения динамического содержимого как по горизонтали, так и по вертикали, параметры CSS:

  • float:left, как вы уже видели, предлагает только ограниченную горизонтальную черепицу.
  • display:inline-block дает другой результат, чем float:left, но без разбивки.
  • CSS многоколоночный макет еще не определен. Он поддерживает вертикальный поток в неявные столбцы, но, вероятно, не таким образом, который квалифицируется как тайлинг.
  • гибкий формат макета пока еще не поддерживается. Он поддерживает тип горизонтального или вертикального потока, который может не квалифицироваться как черепица, хотя он похож на шаг в правильном направлении.

Короче говоря, даже стандарты CSS, которые еще не определены полностью, похоже, не поддерживают это; так что это может быть далеко. Самый простой вариант резервного копирования - использовать плагин jQuery.

Помимо Masonry (как предположил @Billy Moat), еще одна пара плагинов jQuery Isotope и Галерея плиток. Наиболее часто упоминается масонство.

Ответ 2

Нет, это невозможно сделать в CSS. Лучший способ - использовать элемент javascript, называемый масонством, которого я боюсь.

http://masonry.desandro.com/

Ответ 3

позволяет сказать, что число px для увеличения пробела 1 блока составляет 50px. margin-top: -50px;

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

Ответ 4

это можно сделать, но, как говорит CHE, если ваш контент динамический, это пойдет не так в худших возможных вариантах.

Но если это статический сайт, это можно сделать, конечно.

Чтобы решить эту проблему, подумайте в блоках и группируйте их и выровняйте их, внутри каждого блока повторите выравнивание всех блоков.