0

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

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

这是 div 的响应式布局，浮动以创建 3 列。

div 有不同的高度，所以当一个 div 出现在一个更高的 div 之后时，它会被向下推到下一列，例如。页眉 3 和页眉 4。

是否可以将不同高度的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>
4

1 回答 1

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

在这里工作 jsFiddle

于 2013-02-14T14:15:37.293 回答