Как я могу получить изображения, чтобы обернуть без вертикального пространства?

Question

Я вытягиваю изображения одинаковой ширины, но разной высоты.Я пытаюсь отобразить их в строках без добавления вертикального пробела.

Например, если в строке 1 есть изображения высотой 100px 150px и 70px соответственно, я бы хотел, чтобы изображения во второй строке отображалисьнепосредственно под каждым изображением на соответствующей высоте.

Прямо сейчас у меня установлен плавающий элемент влево, который работает для горизонтального отображения.Добавление clear: left дает желаемый эффект, но помещает все в один столбец.Как получить обтекание изображений влево, но сразу по вертикали сразу под ним?

Как бы то ни было, все изображения под первыми 3 будут отображаться на той же высоте строки, что и изображение под изображением 150px, с большимвертикальное пространство под изображениями 100px и 70px.

Answer 1

После еще нескольких копаний, это комбинация jQuery и CSS, которая делает то, что я искал, возможным.В частности, JQuery Masonry.

http://desandro.com/demo/masonry/docs/basic-single-column.html

Answer 2

Если вы отображаете их как строки, изображения будут выстраиваться в ряды, с этим ничего нельзя поделать.

Я думаю, что вы скорее хотите отображать их в столбцах, таким образом, изображенияв одном столбце не повлияет на изображения в других столбцах.Просто поместите столбцы рядом друг с другом, перемещая их, и изображения внутри них.

HTML:

<div class="column">
  <img ... />
  <img ... />
  <img ... />
</div>
<div class="column">
  <img ... />
  <img ... />
  <img ... />
</div>
<div class="column">
  <img ... />
  <img ... />
  <img ... />
</div>

CSS:

.column { float: left; }
.column img { display: block; }