html - 在彼此下方的多行上排列文本？

Question

如何模仿这种布局？我可以通过将文本放在单独的 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>

http://jsfiddle.net/VpW5x/1146/

Answer 1

这里建议标记你的代码

1. 将它们设置在同一行使用 display:flex
2. 创建行使用伪元素: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>