0

私は興味のある種​​類のレイアウトをピンで留めようとしています。 

   <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 が壊れていることに気付いた場合。ボックスを壊さずに同じレイアウトを取得する方法。

4

1 に答える 1

0

Isotope または Packery を試してください。空のスペースを常に埋めるグリッド レイアウトを作成できます。

http://packery.metafizzy.co/

また

http://isotope.metafizzy.co/

于 2013-10-31T11:03:27.947 に答える