html - 我怎样才能绝对图像而不重叠到另一个图像？

Question

我将我的画廊设计成 3 行，并以不同的尺寸相互排列。

我有可以将图像提取到数据库的代码，它将以三行发布到我的网站。

.images-item {
min-height: 1px;
float: left;
padding-left: 5px;
padding-right: 5px;
position: absolute;
}

<div class="images-item">
<?php echo "<img class='img-size' 'img- 
responsive'id='hp'src='http://localhost/upload_images/".$rs['image']."'/>"; ?>
</div>

我喜欢我的图像内联成 3 行，大小正常，边到边不与其他图像重叠。

标签： htmlcss

Answer 1

我认为您可以使用带有垂直对齐的弹性框。

不要忘记为您的容器设置最大高度:)

希望能帮助到你 ！

.container {
  display:flex;
  flex-direction:column;
  max-height:600px;
  flex-wrap: wrap;
}

img{
  padding: 5px;
}

<div class="container">
  <img src="https://picsum.photos/200/260
" />
    <img src="https://picsum.photos/200/310
" />
    <img src="https://picsum.photos/200/200
" />
    <img src="https://picsum.photos/200/250
" />
    <img src="https://picsum.photos/200/550
" />
</div>