Question

我正试图让我的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一样： - ）

Answer 1

根据列

来思考

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>

Answer 2

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

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

HTML / CSS - 如何使div彼此适合

2 个答案: