html - 内联 block 与 pintrest 一样的板

Question

我希望内部 div 自动流到顶部。就像 Pintrest UI

http://jsfiddle.net/zbbHc/127/

HTML

<div class="wrapper">
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
</div>

CSS

.wrapper {
width: 100%;
background: red;
text-align: center;
}

.iB {
display:inline-block;
vertical-align:top;
width: 200px;

background: green;
 }

Answer 1

如果您要动态生成 HTML，只需在生成代码时注释掉内联 div 之间的空白即可。

Demo

<div class="wrapper">
    <div class="iB">Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br></div><!--
    --><div class="iB">Content<br>Content<br>Content<br>Content<br></div>
</div>