css - 多行跨度行为元素

Question

我想显示一个复杂但固定大小的多行元素列表，假设当到达行尾时它们将换行，使它们在每一行中按 n 出现，当n 取决于页面宽度。像这样的东西:

Mary had    Mary had    Mary had
a little    a little    a little
LAMB        LAMP        WHISKEY


Mary had
a little
TOO MUCH

我应该怎么做？

Answer 1

inline-block spans 应该这样做:

body {
  font-family: sans-serif;
}
#container span {
  display: inline-block;
  width: 5em;
  border: 1px solid black;
}

<div id='container'>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
</div>
</body>

</html>