html - 我对 Pinterest HTML 的尝试

Question

我写了一些 html 来创建类似于 Pinterest 的文本/图像 block 。我尝试使用“float:left”创建 3 列图 block ，但对齐方式不正确。

http://jsfiddle.net/cme0848/zran44vr/6/

.tb-box{
   font-family: 'Ubuntu', sans-serif;
   width:245px;
   border-radius:5px;
   background-color:#f3f3f5;
   float:left;  
   margin-right:5px;
   text-align:center;
   margin-bottom:5px;
}

如何让我的图 block 从左到右正确填充？

~克雷格

Answer 1

根据一位同事的说法，这种类型的样式在使用当今 W3C 标准的 CSS 中是不可能的。我将不得不更改我的代码以使用 jquery。

这基本上就是我要找的东西。 Simple Jquery Plugin .轻巧灵活的 pintrest 风格网格实现。我所要做的就是将我的 DIV 插入到他们提供的示例 HTML 中的标签中。