0

我希望内部 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;
 }
4

4 回答 4

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>
于 2013-05-14T05:38:54.770 回答
1

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>
于 2013-05-14T05:41:15.430 回答
0

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

.wrapper {
   font-size: 0px;
}

.iB {
    font-size:15px;
}

演示在这里

于 2013-05-14T05:25:22.680 回答
0

我相信你正在寻找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/

于 2013-05-14T05:25:45.007 回答