适合不同高度的浮动div？答案

【问题标题】：Fit floating div's with different heights?适合不同高度的浮动div？
【发布时间】：2013-02-14 13:33:56
【问题描述】：

我在这里有一个简单的演示来说明我的问题。

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>

【问题讨论】：

这个问题已经回答了...检查这里-> stackoverflow.com/questions/6131661/…

标签： html css layout multiple-columns

【解决方案1】：

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

【讨论】：