代码之家 › 专栏 › 技术社区 › Stackedo

引导网格图像问题高度元素

grid image css

Stackedo · 技术社区 · 6 年前

我的CSS不是很好,所以我不知道如何解决我的问题。我有一个网格图像(你可以在 https://i.imgur.com/88yDcbN.png )如你所见,第一张图片(我选择)下面有无用的空白。

我如何移动下面的图像,以便有50px的差异?

实际上,我在我的盒子里使用这些类:

col-sm-6 col-md-4

正如你所看到的,我正在使用引导程序。

另一个在里面潜水 col-sm-6 col-md-4 有合适的高度。

谢谢你的帮助!

示例框:

<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)

1 回复 | 直到 6 年前

ReSedano 6 年前

对于特定布局(a Mansonry -类似布局)bootstrap4为您提供了一个解决方案:使用 卡片栏 : 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