#html #css
#HTML #css
Вопрос:
Нажмите здесь, чтобы просмотреть соответствующую страницу.
Есть ли способ выровнять divs в динамической сетке? Это означает, что они всегда равноудалены друг от друга, независимо от того, насколько велика их высота?
Комментарии:
1. Шесть или девять на страницу, я думаю, будет пределом.
2. Вы хотите что-то вроде этого? ruzee.com/blog/2007/05/align-list-items-horizontally-with-css
3. Вот так: i39.tinypic.com/o3hw2.jpg
4. Если вы хотите, чтобы разделы были смещены, как кирпичи в стене, как на вашей иллюстрации, вам, вероятно, потребуется заглянуть в Javascript, как здесь: tympanus.net/codrops/2011/08/04/fullscreen-grid-portfolio … Но если выровнять их так, чтобы вершины были плоскими, все в порядке, смотрите новую ссылку, которую я дал выше.
Ответ №1:
Я не уверен, правильно ли я понял ваш вопрос, но если да, то вы пытаетесь понять, как создать сетку объектов (например, таблицу).
Обычно у вас есть div-оболочка для определения ширины «ограничения», и внутри нее помещаются элементы, которые все «плавают» влево, и таким образом, они свернутся в следующую строку, когда больше не останется места. (Нет проблем с изменением высоты любого элемента на что-то отличное от 100 пикселей, и они все равно будут прикреплены друг к другу с помощью float)
Вы можете увидеть пример по следующей ссылке:http://jsfiddle.net/UkBFr/1 /
Шай.
Комментарии:
1. Высоты разделов иногда будут иметь разную высоту. Ширина всегда будет одинаковой. Таким образом, идеальная сетка невозможна. Мне нужно, чтобы верхняя часть divs второй строки выстраивалась в линию до нижней части div над ней, в основном. Это действительно трудно объяснить. 🙂
2. Может быть, загрузить какую-нибудь иллюстрацию того, что вы пытаетесь сделать? Я думаю, что немного поработав с моим примером, вы получите то, что вам нужно 🙂
3. Для этого есть много решений, самым простым решением, я думаю, было бы либо уменьшить эти divs на 10 пикселей с относительным позиционированием: jsfiddle.net/UkBFr/4 Или используйте jQuery, чтобы изменить css только для «средних» объектов, если вы не хотите использовать класс для всех вторых объектов.