我的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

10-05 21:00
查看更多