我在这里有一个简单的演示来说明我的问题。
http://www.ttmt.org.uk/forum/index.html
它是div的响应式布局，浮动创建3列。
div有不同的高度所以当一个div来自一个更高的div 它被推下一列Eg。 Header3和Header4。
是否可以让div具有不同的高度。
我在这里有图像来说明所需的布局。 div的顺序 只要它们结合在一起就没关系。
http://www.ttmt.org.uk/forum/1.png
提前感谢蚂蚁的帮助。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:10px 'Source Sans Pro', sans-serif;
font-size:100%;
font-size:1.02em;
color:#555;
}
#pageWrap{
max-width:1135px;
margin:0 auto;
border-left:40px solid white;
border-right:40px solid white;
}
/*---------------------
sec-sevice
----------------------*/
#sec-service{
padding:0 0 230px 3.52422907488987%;
margin:30px 0 0 0;
}
#sec-service .service{
float:left;
width:29.68036529680365%;
background:#ccc;
margin:0 3.65296803652968% 6px 0;
}
.service h3{
font-weight:700;
font-size:1.1em;
padding:10px 0;
}
.service p{
padding:0 0 10px 0;
margin:0 0 10px 0;
}
/*---------------------
Media queries
----------------------*/
@media only screen and (max-width:880px){
#sec-intro p,
#sec-service .service{
width:100%;
float:none;
}
}
</style>
</head>
<body>
<div id="pageWrap">
<section id="sec-service" class="group">
<div id="serviceText" class="group">
<div class="service">
<h3>Heading 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
</p>
</div>
<div class="service">
<h3>Heading 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
</p>
</div>
<div class="service">
<h3>Heading 4</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 5</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 6</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 7</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
</p>
</div>
</div>
</section>
</div><!-- #pageWrap -->
</body>
</html>
答案 0 :(得分：0)
如Aspiring Aqib所述，您可以使用Masonry jQuery插件。
但您也可以使用简单的CSS模式：
<强> HTML
<div class="column">
<div class="box">1 Lorem Ipsum</div>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">7 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">3 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
</div>
<强> CSS
.box {
width: 50px;
min-height: 50px;
background: #ccc;
margin: 3px;
padding: 3px;
float: left;
}
.column {
width:60px;
float: left;
}