Question

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

但我的要求刚刚改变，我正在努力完成这一项。与链接问题一样，我想要L＆amp; R占其容器的70％，但现在我需要在每个L＆amp;的末端加上一条线（点线）。 R div但该行必须运行100％的容器。我得到它左右浮动，但需要它是Flexbox，Flexbox有很多变量和属性，很难知道从哪里开始。

Here: AHROW - person1@email.com,person2@email.com,
Here: AHLANG - No Records here
Here: AHALEX - person3@email.com,

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以这样做：

* {
  box-sizing: border-box;
}

.column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

hr {
  width: 100%;
  border-style: dotted;
}

div.left, div.right {
  width: 70%;
  padding: 5px 10px;
}

div.left {
  align-self: flex-start;
  background: orange;
}

div.right {
  align-self: flex-end;
  background: yellow;
  text-align: right;
}

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

替代左右div与公共div包含一行

2 个答案: