交替左右div與普通div，包含一行

Question

我收到了我在此處發佈的問題的答案Flex grid: Alternate left and right。

但是我的要求剛剛改變，我正努力完成這一項。 與鏈接的問題一樣，我希望L div容器的70％，但現在我需要在每個L 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>

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>