divsの行の行の

Question

のIDは、互いに2つのdivを持つようにします。問題は、IDは右の列の高さ/ 6を除算することです。それはボタンのように機能する右に6つのdivがあるからです。私はどうすればいいのですか？私はそれがフレックスボックスを使用する可能性があることを知っていますが、それでは、私はそれをどのようにして高さを分割するように言いますか？

また、私は同じheigh divsのjavascriptソリューションを見つけましたが、ちょうどいくつかの単純なコードを除算に追加する必要がありますか？アドバイスありがとうございます。

HTML 
//left side 
    <div id="columnOne"> 
    </div> 

//right side (height of left side /6 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 


    // Javascript 
    $(".columnTwo").height($("#columnOne").height() 

）;

Answer 1

使用フレキシボックス、および異なるdivの中で各列を挿入します。

<div class="columns"> 

<div class="columnOne"> 
</div> 

<div class="columnTwo"> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
</div> 
</div> 

このCSSで：

.columns { 
    display: flex; 
    flex-flow: row; 
} 

.columnTwo { 
    display: flex; 
    flex-flow: column; 
} 

.columnTwo > div { 
/* w/e you want */ 
flex: 1; 
}