Убрать отступы между background

#html #css #background #отступы

Есть галерея


Вот код  

    
  
    

    

    

    

    


    

    


Каким образом можно сделать обтекание без пропусков , что бы получилось как на картинке
, желательно без привлечения javascript , только средствами css


    

Ответы

Ответ 1

С помощью колонок:

Поддержка браузерами 97.6%



.galery{
   -webkit-column-count:2;  
    -moz-column-count:2;  
    column-count:3;

    /*Отступ между колонками*/
    -webkit-column-gap: 0px;  
    -moz-column-gap: 0px;  
    column-gap: 0px;

    /*Отступ между картинками*/
    line-height:0;
}

.galery img{
     width:100%;
}

   
    
   
      
      



Ответ 2

Например с помощью masonry grid:



$('.galleryLoad').masonry({
  itemSelector: '.aGalleryImg',
  percentPosition: true
});
img {
  max-width: 100%;
  width: 100%;
}

.aGalleryImg {
  width: 33%;
}

  



  
  

    

    

    

    

    

    

    

    

    

    

  




Такой еще вариант с flex:



img {
  max-width: 100%;
  width: 100%;
}

.aGalleryImg {
  width: 33%;
}

.galleryLoad {
  display: flex;
  flex-flow: column wrap;
  max-height: 650px;
  height: 100%;
}