嘿,我正在尝试制作一个具有不同形状的 float 网格。
这是我的目标和发生的事情: 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 版本。
最佳答案
编辑:抱歉第一次没有读到你需要动态框。
如果您的列的大小可以缩放(例如某种响应式设计),那么您需要一些可以动态设置这些绝对位置的东西。所以你需要 javascript。
为此,您可以使用 jquery masonry 或 jquery isotope。
:)
关于html - 非均匀网格 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17281410/