html - 先从上到下渲染，再从左到右渲染，清除css/html解决方案，没有服务器端没有js

Question

我有代码 http://jsfiddle.net/edkrwtpn/1/

html:

<div class="items-container" >
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>

CSS:

.items-container{
  width: 100%;
}

.items-container > span{
  display: inline-block;
  width: 33%;
}

元素自动呈现如下:

但我需要它们像这样自动呈现:

是否可以仅使用 html/css 而无需 js 或服务器端处理使其表现得像预期的那样？

元素数量可以是任意的。所以 5 项不是常数值。

更新

元素宽度必须始终为 33%。所以行必须只包含 3 个元素，我不需要增加行中的元素数。

所以如果我要添加更多元素，他们必须从这个转向:

为此:

Answer 1

CSS 列

.items-container {
  columns: 3 auto;
}

<div class="items-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>