特殊的“浮动”在盒子的马赛克 [英] Special 'Float' in Mosaic of Boxes

问题描述

我正在使用简单的CSS和HTML制作的镶嵌（jsFiddle）。

I'm working with a mosaic (jsFiddle) made with simple CSS and HTML.

马赛克的行和列的宽度和高度相同。每个单元格应该被整个框或其一部分填充。换句话说，每个框应当在长度方向上占据一个或多个框，并且在宽度方向上占据一个或多个框。

The mosaic has rows and columns of the same width and height. Each one of its cells should be filled by an entire box or a part of it. In other words, every box should occupy one or more boxes length-wise and one or more boxes width-wise.

当所有框只占用一行时，一切正常。但是，当我试图使一个盒子大于一行， float：left 停止工作，我想要的方式：

When all the boxes take up only one row, everything works fine. However, when I try to make a box bigger than a row, the float:left stops working the way I want it to:

http://img198.imageshack.us/img198/5207/boxshoudgohere .png

js解决显示的问题

如上图所示，大框旁边的（在HTML中）的灰色框会跳到下一行;我需要把盒子移动到红色箭头指向的地方。我的问题是：如何防止灰色框移动？

As illustrated above, the gray boxes that are (in the HTML) right next to the big box skip to the next row; I need to move the boxes to where the red arrows point. My question is: how can I prevent the gray boxes from moving?

考虑到我更喜欢一个干净的解决方案。换句话说，使用绝对或相对定位移动框不会是最好的选择，因为框和它们的宽度/高度由JavaScript生成（尽管可以随意发布任何回答）。

Take into account that I would prefer a clean solution. In other words, moving the boxes with absolute or relative positioning wouldn't be the best option since the boxes and their width/height are generated by JavaScript (although feel free to post any answer).

感谢您的时间。

推荐答案

Jquery Masonry 会为你做这个。不幸的是，你不能用简单的标记和CSS来实现你所需要的。

Jquery Masonry will do this for you. Unfortunately you won't achieve what you're after with simple markup and CSS.

这篇关于特殊的“浮动”在盒子的马赛克的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！