例如,我有 5 个文本 block ,从 A 到 E。
然后,我想将它们排序为:
A
B D
C E
我已经为 B~E 尝试了 display:inline-block
,但它会让
A
B C
D E
此外,当文本 block 的行数不同时,文本 block 从底部对齐。
我想让他们在同一行开始
float
甚至无法按照我的意愿对齐。
有什么办法可以做到吗?
最佳答案
您可以使用 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>
关于html - 带有空白区域的两列文本 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54730784/