Question

我正在尝试pin兴趣类布局。

   <div id="container" class="cols">
     <div class="box one">1</div>
     <div class="box two">2</div>
     <div class="box one">3</div>
     <div class="box two">4</div>
  </div>

 #container {
  width: 100%;
  max-width: 90%;
  margin: 2em auto;
}
.cols {
-moz-column-fill: balance;
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;

-webkit-column-fill: balance;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;

column-count: 3;
column-gap: 3%;
column-width: 30%;
column-fill: balance;

 overflow: hidden;
}

.box {
  margin-bottom: 20px;
   height: 200px;
}
.box.one {
  background-color: #d77575;
}
.box.two {   
  background-color: #dcbc4c;
}

通过互联网上的一些教程，我得到了一些像这样的东西。 http://jsfiddle.net/LnG7v/

但问题是盒子被破坏以与布局对齐。如果您注意到示例中框2和框3已损坏。如何在不破坏框的情况下获得相同的布局。

Answer 1

尝试Isotope或Packery。它允许您创建始终填充空白区域的网格布局。

http://packery.metafizzy.co/

或

http://isotope.metafizzy.co/

pinterest kind布局：盒子坏了

1 个答案: