css - 如何根据 DIV 的高度和宽度定位 DIV？

Question

如何在第一列中向上滑动卡片（div）？（所以它看起来很整洁，因为 div 高度是可变的）这是 HTML 框模型的限制，还是有任何不使用 javascript 的黑客技术。我不想通过使身体的背景颜色与这些卡片相匹配来隐藏这些卡片。

对于下图的 HTML，我使用 float:left 属性来内联这些 div。

div 的 CSS 类在这里

.test{
   background:grey;
   float:left;
   width:100px;
   margin:5px;
}

添加更多信息。我不想将这些 div 放在两/三列中。
我正在尝试在 Google Plus 中实现类似的帖子。任何 div 可以包含任何高度和宽度 !!!HTML 应该自动放置没有空格的 div。

我为这个问题创造了一个小提琴。 http://jsfiddle.net/Phkz6/

Answer 1

我建议inline-block改用。这样您就可以控制height财产。

Answer 2

我会这样做：

1. 将内容区域分成两列（每列都有display: inline-block一个宽度）
2. 每个帖子应该有宽度〜= 95％
3. 左边一个小边距

这是一个 jsfiddle 向您展示我的意思： jsfiddle

Answer 3

我们显然需要更多细节的代码，但是：

• 假设您正在使用 float:left 或 display:inline-block 等，您可以在您的项目上尝试“vertical-align:top”，有时它可以解决简单堆栈的问题。
• 表格最适合网格，并且您将拥有一个非常水平的行，但是您将有一个漂亮的“电子表格”外观，其中单元格看起来不均匀。
• 砌体/同位素也会为您的计划提供非常酷且相当简单的补充。