非均匀网格浮动

Posted 2023-03-06

【中文标题】非均匀网格浮动

【英文标题】：Non uniform grid float

【发布时间】：2013-06-21 07:26:39

【问题描述】：

嘿，我正在尝试制作一个具有不同形状的浮动网格。

这是我的目标和正在发生的事情： http://imgur.com/a/wXQfA

如您所见，水平部件下方有一个间隙。我试图在不使用任何定位的情况下修复它，以便以后可以添加框或移动它们。

代码： html

        <li class="mediumBox">
            <a href="#"><img src="..."  ></a>
        </li>

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

        <li class="verticleMediumBox">
            <a href="#"><img src="..."  ></a>
        </li>

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

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

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

        <li class="smallBox">
            <a href="#"><img src="..."  ></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 版本。

【问题讨论】：

您的 jsfiddle 示例中的 clearfix 类在哪里？

这对于仅使用 CSS 的动态内容是不可能的。使用浮点数或inline-block，当块的大小非常不同时，总会有空白。您需要使用一些 jQuery，可能是像 jQuery Masonry 这样的平铺插件，或类似的东西。

【参考方案1】：

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

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

为此，您可以使用 jquery masonry 或 jquery isotope。

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)