0

pinterest.comのように、divを互いに適合させようとしています。現在、私の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 に答える