首頁(yè) 猿問 div之間垂直線的CSS

div之間垂直線的CSS

Html5

森林海 2023-10-30 20:29:43

我正在使用 vue （html 語(yǔ)法）為評(píng)論鏈創(chuàng)建 div，基本上是存在多個(gè)評(píng)論的地方，以及一種將它們?nèi)挎溄釉谧约旱娜萜髦械娘L(fēng)格。我目前有一個(gè)漂亮的小布局，在每個(gè)評(píng)論的左側(cè)創(chuàng)建了一個(gè)描邊圓圈，這是一個(gè)很好的步驟，但我想做的是找到一種方法來創(chuàng)建在圓圈之間垂直運(yùn)行的實(shí)線或虛線工件來完成將它們鏈接在一起的想法。這是我所擁有的和一個(gè)小涂鴉來代表我想要的：下面發(fā)布我的代碼。實(shí)現(xiàn)這一目標(biāo)的好方法是什么（假設(shè)我不擔(dān)心移動(dòng)響應(yīng)能力，因?yàn)槲铱赡軙?huì)在移動(dòng)設(shè)備上完全取消該鏈）？<div class="commentsChainContainer"><div class="commentsChain" style="display:flex; flex:1; flex-direction:row; align-items: center; align-content: center; margin-bottom:45px;"> <div class="commentArtifact"></div> <div class="singleComment" style="padding-left:20px;"> <div class="commentAuthorBox" style="display: flex; flex:1; flex-direction: row; align-items: center; align-content: center;"> <p class="commentAuthor firstLastNames" style="font-size:20px;">Comment by John Doe</p> </div> <div class="commentTextBox" style="margin-top:20px;"> <p class="commentText">Here's a comment</p> </div> </div></div><hr><div class="commentsChain" style="display:flex; flex:1; flex-direction:row; align-items: center; align-content: center; margin-bottom:45px;"> <div class="commentArtifact"></div> <div class="singleComment" style="padding-left:20px;"> <div class="commentAuthorBox" style="display: flex; flex:1; flex-direction: row; align-items: center; align-content: center;"> <p class="commentAuthor firstLastNames" style="font-size:20px;">Comment by John Doe</p> </div> <div class="commentTextBox" style="margin-top:20px;"> <p class="commentText">Here's a comment</p> </div> </div></div><hr></div><style type="text/css"> .commentArtifact{ background-color:#fff; border:1px solid #cccccc; height:30px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:30px;}</style>

查看完整描述

1 回答

交互式愛情

TA貢獻(xiàn)1712條經(jīng)驗(yàn) 獲得超3個(gè)贊

這是一個(gè)很好的問題，我真的必須考慮如何實(shí)現(xiàn)這一目標(biāo)。我用它快速寫了一個(gè)代碼，因?yàn)槲易约阂膊惶_定。

https://codepen.io/sean-mooney/pen/Jjdqevm

基本上，我發(fā)現(xiàn)最簡(jiǎn)單的解決方案是創(chuàng)建跨越元素高度一半的單獨(dú)元素，然后將位置設(shè)置為絕對(duì)位置。然后我弄亂了頂部和左側(cè)的值，將其在 O 內(nèi)對(duì)齊。顯然，您將用 O 替換您的圖標(biāo)。并且還要確保您的容器設(shè)置為或任何絕對(duì)定位的元素都會(huì)讀取頂部/左側(cè)的position: relative;值整個(gè)頁(yè)面或絕對(duì)定位的下一個(gè)父元素。

</div>

一旦元素排列好，我就會(huì)border-left: 1px DASHED gray得到你想要的虛線鏈。元素相交的地方看起來有點(diǎn)奇怪，但我認(rèn)為通過一點(diǎn)點(diǎn)調(diào)整你就可以得到你喜歡的東西。但總體原理應(yīng)該是相同的。

希望這可以幫助！

反對(duì) 回復(fù) 2023-10-30