html - 左右交替 div 与包含一行的公共(public) div

Question

我已收到我在此处发布的问题的答案 Flex grid: Alternate left and right .

但我的要求刚刚发生变化，我正在努力完成这一要求。与链接的问题一样，我希望 L & R div 占其容器的 70%，但现在我需要在每个 L & R div 的末尾有一条线(虚线)，但该线必须运行 100% 的容器。我让它可以左右浮动，但需要它是 Flexbox，Flexbox 的变量和属性太多了，很难知道从哪里开始。

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

Answer 1

您可以使用伪元素:after 来创建虚线边框

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

* {
  box-sizing: border-box;
}

.column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

div.left,
div.right {
  width: 70%;
  padding: 5px 10px;
}

div.left {
  align-self: flex-start;
}

div.right {
  align-self: flex-end;
  text-align: right;
}

.column div::after {
  content: '';
  border-bottom: 1px dotted #000;
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px;
  margin:0 10px;
}

<div class="column">
  <div class="left">L</div>
  <div class="right">R</div>
  <div class="left">L</div>
  <div class="right">R</div>
  <div class="left">L</div>
  <div class="left">L</div>
  <div class="right">R</div>
  <div class="right">R</div>
  <div class="right">R</div>
  <div class="left">L</div>
</div>