の隣に、異なるサイズの正方形とグリッド、および相互

Question

の上に私はそうのようなものを作成しようとしています：

、私は私が間違って始めています確信しているが、私はどのように他を見ることができません私は助けるためにオンラインで何かを見つけることができません。私のコードは、これまでのところです：

<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

Answer 1

• ソリューション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>