Ответственная галерея начальной загрузки выходит из div

У меня есть галерея, которая выходит из родительского div, и я не могу сортировать изображения, чтобы оставаться в этом div на всех экранах мультимедиа, вот скриншот и фрагмент кода ,Ответственная галерея начальной загрузки выходит из div

http://i.imgur.com/wLeoRPa.jpg

<div id="gallery" class="container-fluid"> 
<h1><kbd>Gallery</kbd></h1> 
<div class="container"> 
<ul> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/1.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/2.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/3.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/4.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/5.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/6.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/7.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/8.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/9.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/10.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/11.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/12.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/13.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/14.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/15.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/16.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/17.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/18.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/19.png" width="150" height="150"> </li> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/20.png" width="150" height="150"> </li> 
</ul> 
    </div> 
    </div>

мне нужно сначала отсортировать все, что изображения, чтобы остаться в этом DIV (как сетки), а затем сделать JQuery для расширения DIV на небольших экранах СМИ

источник

2015-09-23 tehn0drom

Вы можете поделиться своими CSS, пожалуйста? –

#gallery {padding-top: 50px; height: 500px; color: # 000000; background-color: #DCDCDC; border: 1px solid;} Все остальные атрибуты css находятся в bootstrap «ленивый» класс для jQuery ленивый загрузочный плагин – tehn0drom

попробуйте удалить «height: 500px» из CSS, он должен работать. –

Без CSS, сложно сказать. Но они выглядят так, как будто они плавают. Если в этом случае может возникнуть проблема clearfix, в которой содержащий div не будет расширяться с помощью перемещаемых элементов.

Источник: http://learnlayout.com/clearfix.html

источник

2015-09-23 20:22:27

сделать что-то вроде этого с помощью CSS (clearfix). После этого вы можете сортировать любой способ, которым хотите, с javascript, и они будут плавать, но вы в них нуждаетесь. вы также можете сделать встроенный блок и удалить необходимость поплавка вместе.

https://jsfiddle.net/calebswank/5cxnq6zy/

ul::after { 
    content: ''; 
    clear: both; 
    display: table; 
}

источник

2015-09-23 20:25:46

#gallery {padding-top:50px;color: #000000; background-color: #DCDCDC; border: 1px solid;} 
 
ul {padding:0;list-style: none;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<div id="gallery" class="container-fluid"> 
 
<h1><kbd>Gallery</kbd></h1> 
 
<div class="container"> 
 
<ul class="text-center"> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/1.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/2.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/3.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/4.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/5.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/6.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/7.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/8.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/9.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/10.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/11.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/12.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/13.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/14.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/15.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/16.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/17.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/18.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/19.png" width="150" height="150"> </li> 
 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/20.png" width="150" height="150"> </li> 
 
</ul> 
 
    </div> 
 
    </div><br>

Проверьте этот фрагмент на виду страницы.

источник

2015-09-24 04:18:37

Ответственная галерея начальной загрузки выходит из div

ответ

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