0

我正在尝试让我的 div 像在 pinterest.com 上一样相互匹配。现在我的 html/css 是这样的：

<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 可以是帖子的任何高度。所以我希望我的 div 适合它的高度。就像 pinterest.com :-)

4

2 回答 2

3

考虑列

css

 <style type="text/css">

  .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>
于 2012-05-26T11:26:12.393 回答
1

没关系，我使用 jQuery 找到了这个插件：

http://www.wookmark.com/jquery-plugin

于 2012-05-26T11:15:57.593 回答