Как выровнять по верхнему столбцу в следующей строке в цикле?
Как выровнять по верхнему столбцу в следующей строке цикла? Я хотел бы, чтобы это выглядело как на первом изображении, а не на втором. Divs отображаются в цикле:
<div class = "container">
<div class = "row">
<? foreach($a as $b): ?>
<div class = "col-xs-12 col-sm-6 col-md-4"" >
$b->foo
</div>
<? endforeach ?>
</div>
</div>
Первое изображение (нежелательно):
Второе изображение (желаемое решение):
Пожалуйста, покажите, какой CSS вы использовали, и создайте минимальный воспроизводимый пример с вашим визуализированным HTML
Посмотрите на позиционирование этих элементов с помощью flex. Размещение display:flex в строке гарантирует, что дочерние элементы на том же уровне также будут той же высоты, что и самый большой дочерний элемент в этой строке.
@04FS Я подтвержу ваш ответ, когда вы создадите его на основе вашего комментария.
Ответы 1
Это побочный эффект плавания, вам нужно clear плавать для каждого x-го элемента с разными «x» для точек останова sm и md.
Селектор nth-child помогает в этом. Чтобы не выбирать столбцы на основе какого-либо конкретного класса col-xy-foo, я бы просто использовал здесь дочерний селектор, .row > :nth-child(…), сама строка стала более уникально выбираемой с помощью дополнительного класса или идентификатора, если это необходимо.
Это побочный эффект float, вам нужно будет очистить float для каждого x-го элемента (разные x для точек останова sm и md.)