Элементы разной высоты, подходящие под див

0

Пользователи 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*****       *****************
***************       *****************
*************** 
*************** 
*************** 

Если это возможно, автоматически. Должен ли я использовать решетку столбцов или я могу добиться чего-то подобного другим? Надеюсь, я задал вопрос, извините за мой английский - я из Польши.

Ждем ответа от вас!

Теги:

2 ответа

0
Лучший ответ

Для такого выравнивания я думаю, что вы в значительной степени застряли с чем-то вроде Isotope - http://isotope.metafizzy.co/ или Masonry - http://masonry.desandro.com/.

  • 0
    Большое спасибо за полезные ссылки. Эти скрипты сильно замедляют работу сайта? Я имею в виду: лучше ли иметь немного более уродливый дизайн без одного из этих скриптов или иметь хороший дизайн с одним из них? Значительна ли разница во времени загрузки?
  • 0
    Это действительно зависит от дизайна, к которому вы стремитесь, но, по моему опыту, сценарии не слишком тяжелы для использования.
Показать ещё 1 комментарий
0

Простым способом сделать это будет то, что ваши столбцы будут горизонтальными и с display: block. Таким образом, они перейдут на следующую строку и будут иметь равную высоту, как вы хотите

  • 0
    Вот как это работает в настоящее время: первый li имеет 60% ширины, второй 40% ширины - это высота, которая отличается. У меня нет никаких столбцов, только элементы li. Должен ли я использовать бутстрапоподобные столбцы?
  • 0
    Если вы хотите, чтобы это работало

Ещё вопросы

Сообщество Overcoder
Наверх
Меню