Question

我有一个走出父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

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

在整页视图中查看此代码段。

Answer 2

没有CSS，很难说。但他们看起来像是浮动的。如果在这种情况下，您可能遇到了一个clearfix问题，其中包含div不会随浮动项扩展。

来源： http://learnlayout.com/clearfix.html

Answer 3

用css（clearfix）做这样的事情。您可以随后使用javascript以任何方式对其进行排序，然后它们会浮动但您需要它们。你也可以进行内联阻止并将浮动的必要性全部消除。

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

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

响应式bootstrap画廊正在离开div

3 个答案: