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

Question

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

对于下面图片的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”，有时它可以用于简单的堆栈。
• 表格最适合网格，你的文章会有一个非常水平的行，但是你会看到一个漂亮的“Spreadsheet-ish”外观，其中单元格看起来不均匀。
• 同样，砌体/同位素会使你的计划变得非常酷且相当简单。