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砌体或jquery同位素。

http://masonry.desandro.com/

http://isotope.metafizzy.co/

：）

非均匀网格浮动

1 个答案: