CSS - 当 block 不能全部放在一行中时，将 block 包装到单个列

Question

假设我在一个容器中有这些 block :

$| Luke Skywalker | Princess Leia | Chewbacca |     $

美元符号 ($) 标记容器的宽度。管道符号 (|) 标记每个 block 的宽度。

现在我缩小容器(可能是因为用户缩小了浏览器窗口)并且它不再足够宽以容纳同一行上的所有 3 个 block 。基于 flexbox (display: flex; flex-direction: row; flex-wrap: wrap;) 的简单实现给了我这个:

$   | Luke Skywalker | Princess Leia |   $
$              | Chewbacca |             $

但这对我来说很难看。我宁愿得到这个:

$           | Luke Skywalker |           $
$           | Princess Leia |            $
$             | Chewbacca |              $

有没有办法使用纯 CSS 实现这种效果？

请注意， block 是动态生成的。我事先不知道将出现的区 block 总数或每个区 block 的内容。

Answer 1

使用这个

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<style>

.block {
  display: inline-block;
  width: 33%;
}

/* Clearfix (clear floats) */
.block::after {
  content: '';
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .block {
    width: 100%;
  }
}
</style>