Я экспериментирую с CSS и свойством float. У меня есть этот "веб-сайт", с большим количеством разделов, согласованных с сеткой 80 пикселей и float: left:
Есть ли способ в CSS, чтобы он выглядел так: чтобы элементы могли использовать пустое пространство над ними?
Без JavaScript, если это возможно.
Спасибо, Мартин.
Для разбиения динамического содержимого как по горизонтали, так и по вертикали, параметры CSS:
float:left, как вы уже видели, предлагает только ограниченную горизонтальную черепицу.display:inline-block дает другой результат, чем float:left, но без разбивки.Короче говоря, даже стандарты CSS, которые еще не определены полностью, похоже, не поддерживают это; так что это может быть далеко. Самый простой вариант резервного копирования - использовать плагин jQuery.
Помимо Masonry (как предположил @Billy Moat), еще одна пара плагинов jQuery Isotope и Галерея плиток. Наиболее часто упоминается масонство.
Нет, это невозможно сделать в CSS. Лучший способ - использовать элемент javascript, называемый масонством, которого я боюсь.
позволяет сказать, что число px для увеличения пробела 1 блока составляет 50px. margin-top: -50px;
Это не волшебство, это только немного ручное, чтобы сделать это для каждого. Если ваш контент динамический, это не сработает или вам нужно js для расчета, нужно ли нам подниматься вверх или нет, на несколько строк и все такое.
это можно сделать, но, как говорит CHE, если ваш контент динамический, это пойдет не так в худших возможных вариантах.
Но если это статический сайт, это можно сделать, конечно.
Чтобы решить эту проблему, подумайте в блоках и группируйте их и выровняйте их, внутри каждого блока повторите выравнивание всех блоков.