问题描述
这是我显示的图库:
我想要显示这样的图像,有点混乱但很棒
存在空白,并且不会自动填充空白部分,因此应填充此空白。
这是我的HTML和CSS代码:
.detail-img{
width: 23%;
margin: 10px;
position: relative;
min-height: 280px;
max-height: 450px;
}
.galeri-row{
margin: auto;
}
.galeri-row img{
border-radius: 15px;
object-fit: cover;
object-position: center;
cursor: pointer;
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section>
<div class="container">
<div class="row galeri-row justify-content-md-center">
<a href="#" class="detail-img">
<img src="img/src">
<div class="detail-text">
<span class="my-tag btn-success">TAG</span>
<p>
Lorem ipsum dolor sit amet consectetur...
</p>
</div>
</a>
<a href="#" class="detail-img galeri-sm">
<img src="img/src">
<div class="detail-text">
<span class="my-tag btn-success">TAG</span>
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
</a>
<a href="#" class="detail-img galeri-sm">
<img src="img/src">
<div class="detail-text">
<span class="my-tag btn-success">TAG</span>
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
</a>
<a href="#" class="detail-img">
<img src="img/src">
<div class="detail-text">
<span class="my-tag btn-success">TAG</span>
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
</a>
...................
</div>
</div>
</section>
解决方法
如果要坚持固定的列布局,我将使用带有flex-direction:列的flexbox来分别管理每个列