Question

我试图使我的 divs 适合彼此就像在pinterest.com上。现在,我的 html/cs 是这样:

<div id="content">
    <div class="box">my content, which can be xx px heigh.</div>
    <div class="box">my content, which can be xx px heigh.</div>
    <div class="box">my content, which can be xx px heigh.</div>
</div>

#content{ float:left;width:1000px; }
.box{
  margin: 10px;
  padding: 5px;
  width: 220px;
  float: left;
}

.box可以是任何高度的邮戳。所以我希望我的divs 适合, 无论它有多高。就像 pinterest. com:-)

Answer 1

我用jQuery( JQuery) 找到了这个插件 :

http://www.wookkmark.com/jquery-plutin" rel=“nofollow'>http://www.wookkmark.com/jquery-plutin

Answer 2

以列为单位思考

ccs cs (千分数)

 <style type="text/ccs cs (千分数)">

  .container { display:block;width:100%; /* or whatever you are using */ }
  .col { display:block;float:left;width:25%; }
  .box { display:block; padding:10px;margin:10px;}
  .clear { display:block; clear:both;line-height:0;}


</style>

上加标记

<div class="container">

 <div class="col">

  <div class="box">my content, which can be xx px heigh.</div>
  <div class="box">my content, which can be xx px heigh.</div>
  <div class="box">my content, which can be xx px heigh.</div>

 </div>

 <div class="col">

  <div class="box">my content, which can be xx px heigh.</div>
  <div class="box">my content, which can be xx px heigh.</div>
  <div class="box">my content, which can be xx px heigh.</div>

 </div>

 <div class="col">

  <div class="box">my content, which can be xx px heigh.</div>
  <div class="box">my content, which can be xx px heigh.</div>
  <div class="box">my content, which can be xx px heigh.</div>

 </div>

 <div class="col">

  <div class="box">my content, which can be xx px heigh.</div>
  <div class="box">my content, which can be xx px heigh.</div>
  <div class="box">my content, which can be xx px heigh.</div>

 </div>

 <div class="clear"></div>

</div>

友情链接