html - 带 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

display: block;结合使用可以忽略float: left;这个问题。但这需要一些额外的努力才能使整个集群居中。

另一种解决方法是屏蔽换行符：

<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>

Answer 2

div如果您正在动态生成 HTML，只需在生成代码时注释掉 inline 之间的空格。

演示

<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>

Answer 3

添加font-size:0到父元素。不要忘记定义font-sizefor 子元素：

.wrapper {
   font-size: 0px;
}

.iB {
    font-size:15px;
}

演示在这里

Answer 4

我相信你正在寻找margin-left:-4px;

.iB {
  display:inline-block;
  margin-left:-4px;
}

http://jsfiddle.net/daCrosby/zbbHc/128/

要删除 top 上的间距，您必须使用 JavaScript，或者将所有内容重新格式化为列。这有一些缺点，但它是一个无 JS 的解决方案。

HTML

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

CSS

#hold{
     width:100%;   
}
.wrapper {
    float:left;
    width: 33%;
}

.iB {
    display:block;
}

http://jsfiddle.net/daCrosby/zbbHc/131/