行高的div的划分

Question

我想要两个 div 放在彼此的前面。问题是，我想将右列的高度除以 6。因为右边有六个div，作用类似按钮。我应该怎么做？我知道使用 flexbox 是可行的，但是，我如何告诉它划分高度？

此外，我找到了 javascript 相同高度 div 的解决方案，我应该只添加一些简单的代码来划分高度吗？谢谢指教

 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

使用 flexbox，将每一列插入不同的 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;
}

行高的div的划分

Division of divs heigh in row

html

javascript

css

division

flexbox