Html 用包含一行的公共div替换左右div

我已经收到了我在这里发布的一个问题的答案

但我的要求刚刚改变，我正在努力完成这一项。 与链接问题一样，我希望L&R部门占其容器的70%，但现在我需要在每个L&R部门的末尾画一条线（虚线），但该线必须占容器的100%。我得到了它与浮动左右，但需要它是Flexbox，有这么多的变量和属性与Flexbox它很难知道从哪里开始

L
-------------
            R
-------------
            R
-------------
            R
-------------
L

---

您可以这样做：

*{
框大小：边框框；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
}
人力资源{
宽度：100%；
边框样式：虚线；
}
左下，右下{
宽度：70%；
填充物：5px10px；
}
左分区{
自我校准：灵活启动；
背景：橙色；
}
右分区{
自对准：柔性端；
背景：黄色；
文本对齐：右对齐；
}

L

R

L

R

L

L

R

R

R

L

您可以这样做：

*{
框大小：边框框；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
}
人力资源{
宽度：100%；
边框样式：虚线；
}
左下，右下{
宽度：70%；
填充物：5px10px；
}
左分区{
自我校准：灵活启动；
背景：橙色；
}
右分区{
自对准：柔性端；
背景：黄色；
文本对齐：右对齐；
}

L

R

L

R

L

L

R

R

R

L

您可以使用伪元素

：after

来创建虚线边框

我编辑了你提供的答案的片段

*{
框大小：边框框；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
}
左分区，
右分区{
宽度：70%；
填充物：5px10px；
}
左分区{
自我校准：灵活启动；
}
右分区{
自对准：柔性端；
文本对齐：右对齐；
}
.column div:：after{
内容：''；
边框底部：1个点#000；
位置：绝对位置；
左：0；
右：0；
填充：10px；
利润率：0.10px；
}

L
R
L
R
L
L
R
R
R
L

您可以使用伪元素

：after

来创建虚线边框

我编辑了你提供的答案的片段

*{
框大小：边框框；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
}
左分区，
右分区{
宽度：70%；
填充物：5px10px；
}
左分区{
自我校准：灵活启动；
}
右分区{
自对准：柔性端；
文本对齐：右对齐；
}
.column div:：after{
内容：''；
边框底部：1个点#000；
位置：绝对位置；
左：0；
右：0；
填充：10px；
利润率：0.10px；
}

L
R
L
R
L
L
R
R
R
L

谢谢，我感到困惑，认为人力资源必须在flexbox本身的范围内。谢谢，我感到困惑，认为人力资源必须在flexbox本身的范围内。