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

div的划分排成一排

1 个答案: