如何在CSS

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

我想要的是，在底部的兩個圖像動起來像右邊的一個。

我想我不應該使用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>

來源

2016-10-23 khoirihendra

提供一個工作示例，否則將無法幫助 – Dekel

你可以使用保證金的包含「邊距：-22px」負值 –

重複 - 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>

來源

2016-10-23 02:47:13

是的，我知道這一點，但我想要的是使img包裝甚至像這裏的不同高度http：// creative .ondrejsvestka.cz / – khoirihendra

回答

相關問題