将文字排列在彼此下方的多行上？

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>