1

これから（Pinterestのように）未定義の数のdivをインターロックしたいと思います：

++++++++ ********
+      + *      *
+      + *      *
+      + ********
+      +         
++++++++ 
~~~~~~~~ --------
~      ~ -      -
~      ~ -      -
~~~~~~~~ -      -
         -      -
         -      -
         -      -
         -      -
         --------

これに：

++++++++ ********
+      + *      *
+      + *      *
+      + ********
+      + --------
++++++++ -      -
~~~~~~~~ -      -
~      ~ -      -
~      ~ -      -
~~~~~~~~ -      -
         -      -
         -      -
         --------

CSSやその他のもので可能ですか？

4

2 に答える 2

3

これはここで何百万回も尋ねられました。

ほとんどの人は石積みを使用します：

http://masonry.desandro.com/

于 2013-02-07T10:12:01.823 に答える
1

zessxのおかげでzessxの回答からこの回答を参照します。

<h2>Without columns</h2>
<div class="box">1 Lorem Ipsum</div>
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">3 Lorem Ipsum</div>
<p class="clear">&nbsp;</p>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
<p class="clear">&nbsp;</p>
<div class="box">7 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>
<h2>With columns</h2>
<div class="column">
<div class="box">1 Lorem Ipsum</div>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">7 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">3 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
</div>

CSS

.box { 
width: 50px;
min-height: 50px;
background: #ccc;
margin: 3px;
padding: 3px;
float: left;
}
.clear {
clear: both;
height: 0px;
}
.column {
width:60px;
float: left;
}

デモを見る

于 2013-02-07T10:32:37.520 に答える