Как удалить пробелы в 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: // StackOverflow. com/questions/8470070/how-to-create-grid-tile-view-with-css –

Похоже, ваши изображения имеют разную высоту, так что вы можете увидеть белое пространство ниже первого изображения и второго изображения не совпадают, а последние 2 изображения появляются сразу после 4-го image (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

Как удалить пробелы в CSS

ответ

Смежные вопросы