javascript - 行内divs高度的划分

Question

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

此外，我找到了相同高度 div 的 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

使用 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;
}