如何模仿这种布局?我可以通过将文本放在单独的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>
答案 0 :(得分:1)
建议在此处标记您的代码
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>