HTML CSS垂直線與div的精確高度

Question

我有一個包含一些內容的 div 元素（如圖所示）。 我想（出於造型目的）在其旁邊創建一條具有完全相同高度的垂直線（需要響應，因此靜態“高度”值不起作用）

有人有想法嗎？

Answer 1

選項 #1 - 設置外部元素的邊框

 .content { border-left: 2px solid #000; padding: 0 0.5rem; } .content p { max-width: 80%; }

 <div class="content"> <p> Petierunt uti sibi concilium totius Galliae in diem certam indicere. Morbi fringilla convallis sapien, id pulvinar odio volutpat. A communi observantia non est recedendum. Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere. </p> </div>

選項 #2 - 創建全高元素

 .content { display: flex; align-items: center; flex-direction: row-reverse; height: 10rem; } .content .line { height: 100%; width: 2px; background: #000; margin-right: 0.5rem; }

 <div class="content"> <p> Petierunt uti sibi concilium totius Galliae in diem certam indicere. Morbi fringilla convallis sapien, id pulvinar odio volutpat. A communi observantia non est recedendum. Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere. </p> <div class="line"></div> </div>

Answer 2

將 div 放入容器中，使容器相對，並使該 div 絕對值，頂部和底部為 0。

.container{
  position: relative;
}

.line{
  width: 4px;
  background-color: red;
  position:absolute;
  top: 0;
  bottom:0;
}

Answer 3

您可以使用左側的簡單邊框來實現它。

 .mytext { border-left:3px solid red; padding-left:15px; }

 <div class="mytext"> <h1>Head<h1> <p>text here</p> <p>text here</p> <p>text here</p> <p>text here</p> <p>text here</p> <p>text here</p> <p>text here</p> </div>