HTML / CSS / JS - 适应性网格布局？

时间：2012-09-01 21:30:58

标签： javascript html css

我有一些（未知高度）元素可以使用float: left;水平调整自己，但如果其中一个元素较高，则下一行中的元素之间会有一个空格。我想把那个元素移到它上面的空白区域。这是问题的图片：Empty space over element, must move it there 没有JavaScript可以做到这一点吗？无论哪种方式，我该怎么做？

2 个答案:

答案 0 :(得分：1)

在没有JS的CSS中：

  • 你可以让“Fotos”相对于“Contato”与display: inline-block垂直对齐（空格有点烦人，如果需要，还有等效的IE6 / 7）

  • 您可以使用 faux-columns 或CSS表格布局（与table tr的非语义HTML表格布局无关）在每个“行”上具有相等高度的块，{{ 1}}和td元素。这是布局，包含您选择的元素）

  • 如果你想堆叠尽可能多的块，那么你将需要创建2列，浮动它们并用块填充它们。这会改变他们在HTML代码中的顺序，因为它们是从上到下然后从左到右书写的（“Fotos”会在HTML代码中的“Home”之后出现）

答案 1 :(得分：0)

只需使用javascript！为此制作了jquery砌体！

http://masonry.desandro.com/

相关问题
最新问题