使用CSS的砌体布局

时间：2018-07-18 08:12:22

标签： jquery css html5 masonry

我正在使用CSS中的column-count处理砖石。在这里，我得到了砌体布局，但是我的问题是，当我添加内容时，第二列div根据内容的高度分为两部分，一半div移动到column1，一半在column2中。我的问题是如何使用CSS实现这种砌体布局。 enter image description here 

#container {
  width: 70%;
  margin: 0 auto;
  background-color: red;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
}

.box.one {
  height: auto;
  background-color: #d77575;
}

.box.two {
  height: auto;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: auto;
}

.box.four {
  background-color: #3daee3;
  height: auto;
}

.box.five {
  background-color: #bb8ed8;
  height: auto;
}

.box.six {
  background-color: #baafb1;
  height: auto;
}

article.post__layout {
  box-shadow: 0 0px 7px 0 rgba(75, 122, 175, 0.33);
}

.image {
  width: 100%;
  height: auto;
}

img {
  width: 100%;
  height: auto;
}

p {
  padding: 40px 20px;
}
<div id="container" class="cols">
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae ests in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem
        vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrs in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutr ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrum vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box five">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box six">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

我通过添加break-inside: avoid;道具来更新您的代码。检查支持here 

#container {
  width: 70%;
  margin: 0 auto;
  background-color: red;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
box-sizing: border-box;
-webkit-column-break-inside: avoid;
break-inside: avoid;
counter-increment: item-counter;
}

.box.one {
  height: auto;
  background-color: #d77575;
}

.box.two {
  height: auto;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: auto;
}

.box.four {
  background-color: #3daee3;
  height: auto;
}

.box.five {
  background-color: #bb8ed8;
  height: auto;
}

.box.six {
  background-color: #baafb1;
  height: auto;
}

article.post__layout {
  box-shadow: 0 0px 7px 0 rgba(75, 122, 175, 0.33);
}

.image {
  width: 100%;
  height: auto;
}

img {
  width: 100%;
  height: auto;
}

p {
  padding: 40px 20px;
}
<div id="container" class="cols">
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae ests in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem
        vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrs in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutr ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrum vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box five">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box six">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
</div>

相关问题
最新问题