如何根据 DIV 的高度和宽度定位 DIV？答案

【问题标题】：How can i position DIVs according to their height and width?如何根据 DIV 的高度和宽度定位 DIV？
【发布时间】：2013-08-29 15:14:48
【问题描述】：

如何在第一列中向上滑动卡片（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/

【问题讨论】：

标签： css html

【解决方案1】：

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

【讨论】：

【解决方案2】：

我会这样做：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：