适合不同高度的浮动div？

我在这里有一个简单的演示来说明我的问题。适合不同高度的浮动div？

http://www.ttmt.org.uk/forum/index.html

就这么漂浮创建3列的div的响应式布局。

div的高度不同，所以当div出现在高于的div后面时，它就会被压到下一列。 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>

来源

2013-02-14 ttmt

这个问题被ALRE ady回答...在这里检查 - > http://stackoverflow.com/questions/6131661/stack-divs-with-different-heights – henser 2013-02-14 13:39:18

正如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; 
}

Working jsFiddle here

来源

2013-02-14 14:15:37 zessx

适合不同高度的浮动div？

回答

相关问题