特殊的“浮动”在盒子的马赛克 [英] Special 'Float' in Mosaic of Boxes
问题描述
我正在使用简单的CSS和HTML制作的
如上图所示,大框旁边的(在HTML中)的灰色框跳到下一行;我需要把盒子移动到红色箭头指向的地方。我的问题是:如何防止灰色框移动?
考虑到我更喜欢一个干净的解决方案。换句话说,移动带有绝对或相对定位的框不会是最好的选择,因为框和它们的宽度/高度由JavaScript生成(尽管可以随意发布任何回答)。
感谢您的时间。
Jquery Masonry 会为你做这个。不幸的是,你不能用简单的标记和CSS来实现你所需要的。
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.
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:
jsFiddle with the issue as displayed above.
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?
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).
Thanks for your time.
Jquery Masonry will do this for you. Unfortunately you won't achieve what you're after with simple markup and CSS.
这篇关于特殊的“浮动”在盒子的马赛克的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!