電網不同尺寸的正方形旁邊，和對彼此

我相信我開始了錯了，但我看不出怎麼回事，再加上我找不到任何幫助。到目前爲止我的代碼是：

<div class="container"> 
    <div class="one"> 
     one 
    </div> 
    <div class="two"> 
     two 
    </div> 
    <div class="three"> 
     three 
    </div> 
    <div class="four"> 
     four 
    </div> 
    <div class="five"> 
     five 
    </div> 
    <div class="six"> 
     six 
    </div> 
</div>

而CSS

.container { 
    background-color: blue; 
    display: flex; 
} 

.one { 
    height: 400px; 
    width: 30%; 
    background-color: red; 
} 
.two { 
    height: 250px; 
    width: 35%; 
    background-color: white; 
} 
.three { 
    height: 400px; 
    width: 35%; 
    background-color: lightblue; 
}

的問題是，我不能得到下一組的div下正常排隊。 Jsfiddle

來源

2017-06-05 Jose Varela

[創建與F A砌體電網lexbox（或其他CSS）]（https://stackoverflow.com/questions/43901955/create-a-masonry-grid-with-flexbox-or-other-css） –

[Flex項目是否可以緊密對齊（https://stackoverflow.com/q/34480760/3597276） –

[使用flexbox（或其他CSS）創建砌體網格]的可能副本（https://stackoverflow.com/questions/43901955）/create-a-masonry-grid-with-flexbox-or-other-css） – Rob

解決方法1：爲什麼你不使用引導，謝謝。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2"> 
     </div> 
     <div class="col-md-5"> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-5"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-5"> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"> 
       </div> 
       <div class="col-md-6"> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-5"> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-2"> 
     </div> 
    </div> 
</div>

溶液2：使用砌體電網：

#container { 
 
    width: 100%; 
 
    max-width: 700px; 
 
    margin: 2em auto; 
 
} 
 
.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: 200px; 
 
    background-color: #d77575; 
 
} 
 
.box.two { 
 
    height: 300px; 
 
    background-color: #dcbc4c; 
 
} 
 
.box.three { 
 
    background-color: #a3ca3b; 
 
    height: 400px; 
 
} 
 
.box.four { 
 
    background-color: #3daee3; 
 
    height: 500px; 
 
} 
 
.box.five { 
 
    background-color: #bb8ed8; 
 
    height: 600px; 
 
} 
 
.box.six { 
 
    background-color: #baafb1; 
 
    height: 200px; 
 
}

<div id="container" class="cols"> 
 
    <div class="box one"></div> 
 
    <div class="box two"></div> 
 
    <div class="box one"></div> 
 
    <div class="box three"></div> 
 
    <div class="box two"></div> 
 
    <div class="box five"></div> 
 
    <div class="box one"></div> 
 
    <div class="box two"></div> 
 
    <div class="box six"></div> 
 
    <div class="box three"></div> 
 
    <div class="box two"></div> 
 
</div>

來源

2017-06-05 02:24:47

電網不同尺寸的正方形旁邊，和對彼此

回答

相關問題