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

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

没关系，我发现这个插件通过使用jQuery：

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

Answer 2

认为在列

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>