代替の左の右のdivと行を含む共通のdivと

Question

私はここに投稿した質問への回答を受け取ったFlex grid: Alternate left and right。

しかし、私の要件はちょうど変更されており、私はこれを行うには苦労しています。 リンクされた質問と同じように、私はL & Rコンテナの70％をR divにしますが、今度はL & R divの最後に1行（点線）が必要ですが、その行はコンテナの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>