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

370

29 марта 2017, 14:43

Есть галерея

Вот код

<style>
.galleryPage {width:90%;max-width:800px;min-width:800px;width:800px;margin:0 auto;padding-top:2em;}
.sortBy{float:left;}
.linkSortAct {border-bottom:1px dashed #003080;color:#003080;}
.linkSort:hover {color:#003080;opacity:0.8;}
.galleryLoad {width:80%;float:left;padding-left:2em;}

.aGalleryImg{width:33%;float:left;height:18em;background-size:contain;background-repeat:no-repeat;margin:0;padding:0;}
.aGalleryImg:hover {opacity:0.6;cursor:pointer;}
.aGalleryAddBtn {margin-top:1em;cursor:pointer;width:100%;text-align:center;font-size:1.2em;background:#d9d9d9;height:2em;padding-top:10px;}
.aGalleryAddBtn:hover{opacity:0.7;}
</style>    
<div class="galleryLoad" id="galleryLoad">  
    <div class="aGalleryImg" id="img2" style=" background-image: url(gallery/original/IMG_1.JPG);"></div>
    <div class="aGalleryImg" id="img3" style=" background-image: url(gallery/original/IMG_10.JPG);"></div>
    <div class="aGalleryImg" id="img4" style=" background-image: url(gallery/original/IMG_11.JPG);"></div>
    <div class="aGalleryImg" id="img5" style=" background-image: url(gallery/original/IMG_12.JPG);"></div>
    <div class="aGalleryImg" id="img6" style=" background-image: url(gallery/original/IMG_13.JPG);"></div>
    <div class="clear"></div>
    </div>

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

Answer 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%; 
}

<div class="galery"> 
   <img src="https://placeimg.com/640/480/any" > 
   <img src="https://placeimg.com/640/280/any" >  
   <img src="https://placeimg.com/640/180/any" > 
   <img src="https://placeimg.com/640/380/any" >    
   <img src="https://placeimg.com/640/230/any" >    
</div>

Answer 2

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

$('.galleryLoad').masonry({ 
  itemSelector: '.aGalleryImg', 
  percentPosition: true 
});

img { 
  max-width: 100%; 
  width: 100%; 
} 
 
.aGalleryImg { 
  width: 33%; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
   
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> 
<!-- or --> 
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script> 
   
  <div class="galleryLoad" id="galleryLoad"> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/500/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/400/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/400/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/300/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/200/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/100/400/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/400/200/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div> 
  </div>

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

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

  <div class="galleryLoad" id="galleryLoad"> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/500/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/400/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/400/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/300/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/200/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/400/200/any" alt=""></div> 
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div> 
  </div>

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Обновление поля с текущей датой

Привет! У меня при запуске приложения C# в поле устанавливается текущая датаПланируется, что приложение будет работать бесконечное число...

373

ASP.NET ошибка связанная со списком

Создал на странице сортировку, сделал это таким образом

508

Задать значение по-умолчанию для поля класса

Доброго времени суток!

352

Системный разделитель

Проблема с dataGridView, когда по умолчанию в системе стоит разделитель "," матюкается БД что не может привести varchar к numeric меняешь разделитель на "" все...

296