#css #css-float #multiple-columns #flexbox
#css #css-float #многоколоночный #flexbox
Вопрос:
При попытке создать своего рода «стену изображений» с изображениями разного размера оказалось трудным не оставлять пробелов.
В идеале изображения большего размера должны выдвигаться в обе стороны, не допуская образования пробелов слева, что, похоже, происходит в данный момент.
Примеры, которые я создал, существуют здесь: http://codepen.io/Smashman/pen/LbydF
.flex
display: flex
flex-wrap: wrap
align-items: flex-start
.float
amp; .item
float: left
.column
column-count(3)
column-gap(0)
Flex, Float и Column — это попытки, показанные здесь, и на данный момент float является самым близким.
Flex не позволяет занимать ту же область, если она уже сдвинута вниз, а column полностью изменяет порядок содержимого и изменяет размеры элементов по своему усмотрению.
В этом примере 4, в идеале, должно быть непосредственно под 1, а затем 5 ниже 3. Это позволило бы стене существовать без пробелов.
Если бы кто-нибудь мог мне помочь, я был бы очень признателен.
Спасибо.
Комментарии:
1. Я не думаю, что вы сможете делать то, что хотите, без некоторой серьезной доработки JS и обработки чисел или жесткого кодирования этого.
2. Я согласен с @Benjamin. Я пробовал это НЕСКОЛЬКИМИ различными способами, но на текущей стадии разработки flexbox я просто не думаю, что это возможно. Такого рода вещи должны быть относительно простыми при использовании некоторых JS. Вот плагин jQuery , который, как я обнаружил, возможно, в том направлении, в котором вы хотите двигаться.