您的位置: 首页  >  技术问答  >  如何在CSS

如何在CSS

分类: 技术问答 • 2022-09-05 13:36:03
问题描述：

删除空白如何删除此空白 - >如何在CSS

enter image description here

我想要的是，在底部的两个图像动起来像右边的一个。

我想我不应该使用col-md- *，但是仍然没有想法。

.portfolio { 
 

 
} 
 

 
.portfolio h4 { 
 
    font-size: 28px; 
 
    font-weight: 600; 
 
    font-family: 'Lora', serif; 
 
    margin-bottom: 20px; 
 
} 
 

 
.portfolio-item { 
 
    padding: 10px; 
 
    border-bottom: 1px solid #eee; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
<div class="row"> 
 
<div class="portfolio col-md-10-col-md-offset-1"> 
 
    <h4>Portfolio</h4> 
 
    <div class="row"> 
 
    <div class="col-md-4 portfolio-item"> 
 
     <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a> 
 
     <h3><a href="#">Wongilang.xyz</a></h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p> 
 
    </div> 
 
    <div class="col-md-4 portfolio-item"> 
 
     <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt=""></a> 
 
     <h3><a href="#">Intanrahmadhani.web.id</a></h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p> 
 
    </div> 
 
    <div class="col-md-4 portfolio-item"> 
 
     <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a> 
 
     <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p> 
 
    </div> 
 
    <div class="col-md-4 portfolio-item"> 
 
     <a href="#"><img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt=""></a> 
 
     <h3><a href="#">Intanrahmadhani.web.id</a></h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p> 
 
    </div> 
 
    <div class="col-md-4 portfolio-item"> 
 
     <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a> 
 
     <h3><a href="#">Wongilang.xyz</a></h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p> 
 
    </div> 
 
    <div class="col-md-4 portfolio-item"> 
 
     <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt=""></a> 
 
     <h3><a href="#">Intanrahmadhani.web.id</a></h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p> 
 
    </div> 
 
    <div class="col-md-4 portfolio-item"> 
 
     <a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a> 
 
     <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p> 
 
    </div> 
 
    <div class="col-md-4 portfolio-item"> 
 
     <a href="#"><img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt=""></a> 
 
     <h3><a href="#">Intanrahmadhani.web.id</a></h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>

+0

提供一个工作示例，否则将无法帮助 – Dekel

+0

你可以使用保证金的包含“边距：-22px”负值 –

+0

重复 - HTTP：//计算器。 com/questions/8470070/how-to-create-grid-tile-view-with-css –

答

好像你的图像具有不同的高度，使你可以看到第一图像和第二图像下方的空白区域是不一样的，最后2张图像后第4次出现权图像（intanrahmadhani.web.id）。

您可以调整/裁剪这些图像以确保高度一致或对图像容器应用固定高度。

.portfolio h4 { 
 
    font-size: 28px; 
 
    font-weight: 600; 
 
    font-family: 'Lora', serif; 
 
    margin-bottom: 20px; 
 
} 
 

 
.portfolio-item { 
 
    padding: 10px; 
 
    border-bottom: 1px solid #eee; 
 
} 
 
.portfolio-item > a:link, 
 
.portfolio-item > a:visited { 
 
    display: block; 
 
    height: 300px; 
 
    overflow: hidden; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
    
 
    <div class="portfolio"> 
 
     <h4>Portfolio</h4> 
 
     <div class="row"> 
 
     <div class="col-md-4 portfolio-item"> 
 
      <a href="#"><img class="img-responsive" src="http://placehold.it/450x650" alt=""></a> 
 
      <h3><a href="#">Wongilang.xyz</a></h3> 
 
      <p>...</p> 
 
     </div> 
 
     <div class="col-md-4 portfolio-item"> 
 
      <a href="#"><img class="img-responsive" src="http://placehold.it/450x450" alt=""></a> 
 
      <h3><a href="#">Intanrahmadhani.web.id</a></h3> 
 
      <p>...</p> 
 
     </div> 
 
     <div class="col-md-4 portfolio-item"> 
 
      <a href="#"><img class="img-responsive" src="http://placehold.it/450x250" alt=""></a> 
 
      <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3> 
 
      <p>...</p> 
 
     </div> 
 
     <div class="col-md-4 portfolio-item"> 
 
      <a href="#"><img class="img-responsive" src="http://placehold.it/450x550" alt=""></a> 
 
      <h3><a href="#">Intanrahmadhani.web.id</a></h3> 
 
      <p>...</p> 
 
     </div> 
 
     <div class="col-md-4 portfolio-item"> 
 
      <a href="#"><img class="img-responsive" src="http://placehold.it/450x350" alt=""></a> 
 
      <h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3> 
 
      <p>...</p> 
 
     </div> 
 
     <div class="col-md-4 portfolio-item"> 
 
      <a href="#"><img class="img-responsive" src="http://placehold.it/450x750" alt=""></a> 
 
      <h3><a href="#">Wongilang.xyz</a></h3> 
 
      <p>...</p> 
 
     </div> 
 
     </div> 
 
    </div>

+0

是的，我知道这一点，但我想要的是使img包装甚至像这里的不同高度http：// creative .ondrejsvestka.cz / – khoirihendra

相关推荐