如何模仿这种布局?我可以通过将文本放在单独的 div-s 中来换行,但是左右顶行也在不同的行上。
<div>
<div style="font-size: 20px; font-weight: 600;">11 <span style="border-left: 1px solid black"></span> B </div>
<div>Seats <span style="border-left: 1px solid black"></span> <span style="font-weight: 600;">Party's name</span></div>
</div>
最佳答案
这里建议标记你的代码
- 将它们设置在同一行使用
display:flex
- 创建行使用伪元素
:after
.wrap{
display:flex;
}
.border-right{
position:relative;
}
.border-right:after{
content: '';
position: absolute;
width: 1px;
background: black;
height: 85%;
top: 5px;
left: 100%;
}
.first{
margin: 0;
font-size: 24px;
font-weight: bold;
}
.second{
margin: 0;
}
.p-10{
padding-right:10px;
padding-left:10px;
}
<div class="wrap">
<div class="border-right p-10">
<p class="first">11</p>
<p class="second">Seats</p>
</div>
<div class="p-10">
<p class="first">B</p>
<p class="second">Party's name</p>
</div>
</div>
关于html - 在彼此下方的多行上排列文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53721471/