我的CSS不太好,所以我不知道如何解决我的问题。我有一个网格图像(您可以在https://i.imgur.com/88yDcbN.png上看到)。如您所见,第一张图片(我选择的图片)下面没有空白。
如何将下面的图像移动到50px的差异?
实际上,我将以下类用于我的盒子:
col-sm-6 col-md-4
如您所见,我正在使用引导程序。
col-sm-6 col-md-4
中的其他div具有正确的高度。谢谢您的帮助!
示例框:
<div class="_00d7">
<div class="row">
<div class="col-sm-6 col-md-4">
<div data-id="11" data-score="4380" class="_4180">
<a class="eac1">
<img src="images/E8wfc3V4Azc.jpg">
</a>
<div class="_96ae">
Punteggio immagine: <b>4380</b>.
</div>
</div>
</div>
</div>
</div>
CSS:
._00d7 ._4180 {
padding: 0;
margin-bottom: 30px;
background-color: #fff;
border-radius: 4px;
border: none;
transition: 0.15s ease-in-out;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
}
._00d7 .eac1 img {
border-radius: 4px 4px 0 0;
vertical-align: middle;
border-style: none;
margin-right: auto;
margin-left: auto;
display: block;
max-width: 100%;
height: auto;
}
(对不起,类名,我在用react)
最佳答案
对于该特定布局(类似于Mansonry的布局),Bootstrap4提供了一个解决方案:使用Card列:https://getbootstrap.com/docs/4.0/components/card/#card-columns。
我举一个例子。这只是一个起点,您可以根据需要进行自定义。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="_00d7">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card-columns">
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/500">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/250">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/100">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
注意:图像顺序是垂直的:
1 4 7
2 5 8
3 6 9