Wie Leerzeichen auf CSS entfernen

Wie diese Leerzeichen entfernen ->Wie Leerzeichen auf CSS entfernen

ich machen möchte, dass zwei Bild im Boden, wie die auf der rechten Seite nach oben.

Ich denke, ich sollte nicht col-md- *, aber immer noch nicht die Idee bekommen.

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

Quelle

2016-10-23 khoirihendra

ein funktionierendes Beispiel angeben, sonst wird es unmöglich sein – Dekel

helfen Sie Marge mit negativen Werten wie "margin-bottom: -22px" verwenden können –

Duplizieren - http: // Stackoverflow. com/questions/8470070/how-to-create-grid-tile-view-mit-css –

Es scheint, wie Sie Ihre Bilder unterschiedliche Höhe haben, so dass Sie den Leerraum unter dem ersten Bild und dem zweiten Bild sind nicht die gleichen, und die letzten zwei Bilder erscheinen direkt nach dem 4. sehen Bild (intanrahmadhani.web.id).

Sie können diese Bilder entweder verkleinern oder zuschneiden, um sicherzustellen, dass die Höhe konsistent ist, oder eine feste Höhe auf den Bildcontainer anwenden.

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

Quelle

2016-10-23 02:47:13

yeah ich weiß darüber, aber was ich will, ist img zu machen, um auch mit unterschiedlicher Höhe wie hier http: // kreativ .ondrejsvestka.cz / – khoirihendra

Wie Leerzeichen auf CSS entfernen

Antwort

Verwandte Themen