非均匀网格浮动

Question

嘿，即时通讯尝试使一个浮动网格具有不同的形状。

这是我的目标，并发生了什么：http://imgur.com/a/wXQfA

正如你可以看到有水平件底下的缺口。我试图修复它，而不必使用任何定位，以便我可以稍后添加框或将它们移动。

代码： 的Html

 <li class="mediumBox"> 
      <a href="#"><img src="..." height="205" width="430"></a> 
     </li> 

     <li class="largeBox"> 
      <a href="#"><img src="..." height="430" width="430"></a> 
     </li> 

     <li class="verticleMediumBox"> 
      <a href="#"><img src="..." height="430" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 
    </ul> 
</div> 
</body> 

的CSS：

body{ 
background-color: #fffdf9; 
height: 100%; 
width: 100%; 
} 

#content{ 
background-color: red; 
height: auto; 
width: 900px; 
margin: 5em auto 0 auto; 
} 

#work ul{ 
list-style: none; 

} 

#work li{ 
float: left; 
margin: 10px; 
} 

#work li >a{ 
display: block; 
} 

#work li .smallBox{ 
float: left; 
display: block; 
} 

#work li .mediumBox{ 
float: left; 
display: block; 
} 

#work li .verticleMediumBox{ 
float: left; 
display: block; 
} 

#work li .largeBox{ 
float: left; 
display: block; 
} 

这里是我的代码：http://jsfiddle.net/jw7pV/ 由于某种原因的jsfiddle版本并不像我的Chrome版本。

Answer 1

编辑：抱歉没有读过第一次你需要动态框。

如果您的列大小缩放（如某种响应式设计），那么您需要一些可以动态设置这些绝对位置的东西。所以你需要javascript。

为此，您可以使用jquery masonry或jquery同位素。

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)