Html 带分区的垂直div

我想在我的网站上创建一个带有X个垂直分区的页面。它们从页面的顶部延伸到底部，占据整个页面，比如说10vw

这很好，但我现在正在努力解决的是，在那些垂直div中，我想要部分。一些垂直div将有1个部分、2个部分和3个部分

#主题(U-selection-container){
位置：绝对位置；
排名：0；
左：0；
右：27px；
底部：20px；
溢出-x：自动；
溢出y：无；
空白：nowrap；
}
.主题\u选择级别\u容器{
显示：内联块；
身高：99.5%；
宽度：10vw；
保证金：0px-5px 0px 0px；
溢出：无；
}
.topics\u selection-split\u cell\u 1{
背景：绿色；
边际：0px；
身高：100%；
}
.topics\u selection-split\u cell\u 2{
背景：灰色；
边际：0px；
身高：50%；
}
.topics\u selection-split\u cell\u 3{
背景：蓝色；
边际：0px；
身高：50%；
}
.topics\u selection-split\u cell\u 4{
背景：洋红；
边际：0px；
身高：33%；
}
.topics\u selection-split\u cell\u 5{
背景：橙色；
边际：0px；
身高：33%；
}
.topics\u selection-split\u cell\u 6{
背景：紫色；
边际：0px；
身高：33%；
}
.主题\u选择级别\u 1{
背景：红色；
}
.主题\u选择级别\u 2{
背景：黄色；
}

---

您只需稍微调整一下高度，您可以给一个34%的值，或者给所有33%的值加上更多的小数点

编辑：向每个内部div添加内容，并将元素与父级顶部对齐。

#topics_selection-container{position:absolute；top:0；left:0；right:27px；display:inline块；bottom:20px；overflow-x:auto；vertical align:top；overflow-y:none；空白：nowrap；}
.topics_选择级_容器{显示：内联块；高度：99.5%；宽度：10vw；边距：0px-5px 0px 0px；溢出：无；}
.topics_selection-split_cell_1{背景：绿色；边距：0px；高度：100%；}
.topics_selection-split_cell_2{背景：灰色；边距：0px；高度：50%；}
.topics_selection-split_cell_3{背景：蓝色；边距：0px；高度：50%；}
.topics_selection-split_cell_4{背景：洋红色；边距：0px；高度：34%；}
.topics_selection-split_cell_5{背景：橙色；边距：0px；高度：33%；}
.topics_selection-split_cell_6{背景：紫色；边距：0px；高度：33%；}
.topics_选择级别_1{背景：红色；垂直对齐：顶部；}
.topics_selection-level_2{背景：黄色；垂直对齐：顶部；}

asdf
asdf
asdf
asdf
asdf
asdf

如果切换到浮动，它会工作

.topics_selection-level_container { float:left; height: 99.5%; width: 10vw; margin: 0;  }

#topics_selection-container{位置：绝对；顶部：0；左侧：0；右侧：27px；底部：20px；溢出-x:auto；溢出-y:hidden；}
.topics_选择级别_容器{浮动：左；高度：99.5%；宽度：10vw；边距：0；}
.topics_selection-split_cell_1{背景：绿色；边距：0px；高度：100%；}
.topics_selection-split_cell_2{背景：灰色；边距：0px；高度：50%；}
.topics_selection-split_cell_3{背景：蓝色；边距：0px；高度：50%；}
.topics_selection-split_cell_4{背景：洋红色；边距：0px；高度：计算（100%/3）；}
.topics_selection-split_cell_5{背景：橙色；边距：0px；高度：calc（100%/3）；}
.topics_selection-split_cell_6{背景：紫色；边距：0px；高度：calc（100%/3）；}
.topics_选择级别_1{背景：红色；}
.topics_selection-level_2{背景：黄色；}

zxczxc
阿斯达斯
qweqwe
cvbcvb
乌蒂里尔
HDFH

更改

溢出：无进入
溢出：隐藏在
中。主题\u选择级别\u容器
。那就行了

.topics_selection-level_container { display: inline-block; height: 99.5%; width: 10vw; margin: 0px -5px 0px 0px; overflow: hidden; }

使用
身高：33.333333%
而不是33%作为
33*3=99
…这样你的1%就剩下了

您已将
display:inline块
应用于默认情况下具有
垂直对齐：基线
的外部容器

您必须将其更改为
垂直对齐：顶部


堆栈片段


#主题(U-selection-container){
位置：绝对位置；
排名：0；
左：0；
右：27px；
底部：20px；
溢出-x：自动；
溢出y：无；
空白：nowrap；
}
.主题\u选择级别\u容器{
显示：内联块；
身高：99.5%；
宽度：10vw；
保证金：0px-5px 0px 0px；
溢出：无；
垂直对齐：顶部；
}
.topics\u selection-split\u cell\u 1{
背景：绿色；
边际：0px；
身高：100%；
}
.topics\u selection-split\u cell\u 2{
背景：灰色；
边际：0px；
身高：50%；
}
.topics\u selection-split\u cell\u 3{
背景：蓝色；
边际：0px；
身高：50%；
}
.topics\u selection-split\u cell\u 4{
背景：洋红；
边际：0px；
身高：33.333%；
}
.topics\u selection-split\u cell\u 5{
背景：橙色；
边际：0px；
身高：33.333%；
}
.topics\u selection-split\u cell\u 6{
背景：紫色；
边际：0px；
身高：33.333%；
}
.主题\u选择级别\u 1{
背景：红色；
}
.主题\u选择级别\u 2{
背景：黄色；
}

ggg
ffff
dddd
您可以使用flex来实现这一点，然后2级div可以增长以适应列：


#主题(U-selection-container){
位置：绝对位置；
排名：0；
左：0；
右：27px；
底部：20px；
溢出-x：自动；
溢出y：无；
显示器：flex；
弹性方向：行；/*对齐列中的级别1子级*/
柔性包装：包装；
}
.主题\u选择级别\u容器{
身高：99.5%；
宽度：10vw；
边距：0px；/*不确定您的左边距在做什么，因此将其删除-如果需要，您可以将其添加回*/
溢出：无；
显示器：flex；
弹性方向：列；/*对齐此列中行中的级别2子级*/
柔性包装：nowrap；
}
.topics\u选择级别\u container>div{
弹性：1；