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 に答える
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 に答える