两列带有空白区域的文本块

Question

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

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

A
B   D
C   E

我已经尝试过display:inline-block的B〜E，但这会成功

A 
B   C
D   E

另外，当文本行的行数不同时，文本块将从底部对齐。

我想让它们从同一行开始

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>

Answer 2

如果仅需要两列，则可以将其包装在“内嵌块”元素中。

<div style="width:100%; display:block">A</div>
<div style="display: inline-block">
  <div>B</div>
  <div>D</div>
</div>
<div style="display: inline-block">
  <div>C</div>
  <div>E</div>
</div>

这也可以使用css-grid或flexbox模型完成