Как починить поехавшие блоки картинок CSS

191

20 января 2019, 15:40

Необходимо убрать расстояние между разными строками(блоками).

Непосредственно css

.clearfix:before,
.clearfix:after{
  content:" ";
  display:table;
}
.clearfix:after{
  clear:both;
}
.container{
  max-width: 1050px;
  padding: 10px;
  margin:0 auto;
}
.gallery{
  width: 100%;
}
.gallery-item{
  float:left;
  background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);
  width: 18%;
  margin: 1%;
  padding: 2%;
  padding-bottom: 3%;
  box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5);
}
.gallery-item img{
  width: 100%;
}

Answer 1

Не сложно такое делать

Обычные свойства css

* { 
  margin: 0; 
  padding: 0; 
} 
 
img { 
  display: block; 
  max-width: 100%; 
  margin: auto; 
} 
 
.items { 
  column-count: 3; 
  column-rule: 20px; 
  max-width: 888px; 
  margin: auto; 
} 
 
.item { 
  display: inline-block; 
  box-shadow: 0 0 1px #000; 
  padding: 4px 6px; 
  margin: 4px; 
  text-align: center; 
}

<div class="items"> 
  <div class="item"> 
    <img src="http://placehold.it/220x259" alt=""> 
    <p> 
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam, deserunt? 
    </p> 
  </div> 
  <div class="item"> 
    <img src="http://placehold.it/220x100" alt=""> 
    <p> 
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda beatae nesciunt dignissimos omnis ad eius provident sint quas vitae doloribus? 
    </p> 
  </div> 
  <div class="item"> 
    <img src="http://placehold.it/220x400" alt=""> 
    <p> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo sed perspiciatis eum rerum illo. 
    </p> 
  </div> 
  <div class="item"> 
    <img src="http://placehold.it/220x320" alt=""> 
    <p> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptas reiciendis vero corporis asperiores necessitatibus! Libero, architecto odio qui quos, hic beatae a veritatis nam, tempora suscipit repudiandae non corporis. 
    </p> 
  </div> 
  <div class="item"> 
    <img src="http://placehold.it/220x200" alt=""> 
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod nostrum officiis quia similique ratione provident deleniti fugit cum repudiandae praesentium, fuga dolore.</p> 
  </div> 
  <div class="item"> 
    <img src="http://placehold.it/220x120" alt=""> 
    <p> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, eos. 
    </p> 
  </div> 
  <div class="item"> 
    <img src="http://placehold.it/220x300" alt=""> 
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti veniam excepturi quasi, vitae asperiores fugit itaque nulla aut laboriosam. Harum quia ea perferendis repudiandae deserunt deleniti optio sed quasi aliquid. 
    </p> 
  </div> 
</div>