html - 带有空白区域的两列文本 block

Question

例如，我有 5 个文本 block ，从 A 到 E。

然后，我想将它们排序为:

A
B   D
C   E

我已经为 B~E 尝试了 display:inline-block，但它会让

A 
B   C
D   E

此外，当文本 block 的行数不同时，文本 block 从底部对齐。

我想让他们在同一行开始

float 甚至无法按照我的意愿对齐。

有什么办法可以做到吗？

Answer 1

您可以使用 CSS flexbox 布局。但是对于这种情况，您需要包装器的 2 个静态参数(宽度和高度)

有关更多信息，请使用此链接: Complete Guide to Flexbox

#wrapper{display:flex;flex-direction:column;height:80px;flex-wrap:wrap;width:50px;justify-content:flex-end}

/* FOR STYLING (OPTIONAL) */
#wrapper div{background-color:#f5f5f5;text-align:center;padding:2px;margin:2px}

<div id="wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>