3つのスタックされたdivの隣に大きなdivを配置するにはどうすればよいですか？

Question

3つの小さなdivが互いに積み重ねられ、右側に大きな3つの小さなdivの高いdivがあります。これはどうすればいいですか？ブートストラップには何か準備ができていますか？

Answer 1

あなたはFlexboxでこれを行うことができ、任意のフレームワークを使用する必要はありません。

.content { 
 
    display: flex; 
 
} 
 
.left { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 
.box { 
 
    padding-bottom: 50px; 
 
} 
 
.right { 
 
    flex: 3; 
 
    background: #22B14C; 
 
} 
 
.box:nth-child(1) {background: #ED1C24;} 
 
.box:nth-child(2) {background: #00A2E8;} 
 
.box:nth-child(3) {background: #FFAEC9;}

<div class="content"> 
 
    <div class="left"> 
 
    <div class="box">Small DIv</div> 
 
    <div class="box">Small DIv</div> 
 
    <div class="box">Small DIv</div> 
 
    </div> 
 
    <div class="right">Big div</div> 
 
</div>

Answer 2

これはそれを行う必要があります：あなたはそれが100％の幅を有することをしたい場合は、

#left, #right { 
 
    float: left; 
 
    font-weight: bold; 
 
    font-family: Calibri, sans-serif; 
 
    font-size: 20px; 
 
} 
 

 
#left .small { 
 
    display: block; 
 
    width: 200px; 
 
    height: 55px; 
 
    padding: 12px; 
 
    box-sizing: border-box; 
 
} 
 

 
#right { 
 
    display: block; 
 
    width: 400px; 
 
    height: 165px; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
    font-size: 60px; 
 
}

<div id="left"> 
 
    <div class="small" style="color: #22B14C; background-color: #ED1C24">Small div</div> 
 
    <div class="small" style="color: #FFAEC9; background-color: #00A2E8">Small div</div> 
 
    <div class="small" style="color: #ED1C24; background-color: #FFAEC9">Small div</div> 
 
</div> 
 
<div id="right" style="color: #0099DB; background-color: #22B14C">Big div</div>

#right { 
    /* ... */ 
    width: calc(100% - 200px); 
} 

を使用