Пользователи stackoverflow.
Я собираюсь создать отзывчивый дизайн, но здесь возникает одна проблема. Мой проект основан на схеме списка:
<ul>
<li>First element code</li>
<li>Second element code</li>
(and so on (up to 20-30 elements)
</ul>
Таким образом, в основном эти elments имеют атрибут float, поэтому они находятся рядом друг с другом, пока их ширина страницы. Моя проблема в том, что у них разные высоты. Пример:
**First LI***** **Second LI******
*************** *****************
*************** *****************
***************
***************
**Third LI***** **Fourth LI******
*************** *****************
*************** *****************
*************** *****************
*************** ***************
Два расположения столбцов. Первый элемент li (первый столбец) имеет большую высоту, чем один во втором столбце. Элемент ниже из первого столбца находится под ним, но второй элемент не помещается в пространство (которое остается, поскольку первый элемент во втором столбце имеет меньшую высоту) и расположен рядом со вторым элементом в первом столбце.
Я хочу достичь:
**First LI***** **Second LI******
*************** *****************
*************** *****************
*************** **Fourth LI******
*************** *****************
**Third LI***** *****************
*************** *****************
***************
***************
***************
Если это возможно, автоматически. Должен ли я использовать решетку столбцов или я могу добиться чего-то подобного другим? Надеюсь, я задал вопрос, извините за мой английский - я из Польши.
Ждем ответа от вас!
Для такого выравнивания я думаю, что вы в значительной степени застряли с чем-то вроде Isotope - http://isotope.metafizzy.co/ или Masonry - http://masonry.desandro.com/.
Простым способом сделать это будет то, что ваши столбцы будут горизонтальными и с display: block
. Таким образом, они перейдут на следующую строку и будут иметь равную высоту, как вы хотите