從左到右從左到右堆疊框用CSS/JS

Question

我需要從左到右堆疊框（自下而上），並儘可能簡單地進行操作（無論是純粹的CSS還是使用JS，無論哪個更簡單）。請參閱下面的說明。

如果只有一個非全行：

┌─────────────────────────┐ 
│       │ 
│       │ 
│  1 2 3 4  │ 
│       │ 
│       │ 
└─────────────────────────┘ 

一個完全填充行：

┌─────────────────────────┐ 
│       │ 
│       │ 
│ 1 2 3 4 5 6 7 │ 
│       │ 
│       │ 
└─────────────────────────┘ 

多行：

┌─────────────────────────┐ 
│       │ 
│       │ 
│ 8 9 10    │ 
│ 1 2 3 4 5 6 7 │ 
│       │ 
└─────────────────────────┘ 

個

許多行：

┌─────────────────────────┐ 
│       │ 
│       │ 
│ 15 16 17    │ 
│ 8 9 10 11 12 13 14 │ 
│ 1 2 3 4 5 6 7 │ 
└─────────────────────────┘ 

很難，但不顯示圖來描述。實現這個最簡單的方法是什麼？什麼是HTML5的方式？

編輯：

添加了此琴展示我的進步迄今：http://jsfiddle.net/12Lk7h45/

我需要的底部排完全充滿，而頂行應部分填充。另外，如何設置一個規則，當元素少於整行時，它應該都是水平居中的？

如果您不想點擊進入小提琴，這裏是我寫下來：

HTML：

<div class="wrapper"> 
    <div class="box"><div class="label">1</div></div> 
    <div class="box"><div class="label">2</div></div> 
    <div class="box"><div class="label">3</div></div> 
    <div class="box"><div class="label">4</div></div> 
    <div class="box"><div class="label">5</div></div> 
    <div class="box"><div class="label">6</div></div> 
    <div class="box"><div class="label">7</div></div> 
    <div class="box"><div class="label">8</div></div> 
    <div class="box"><div class="label">9</div></div> 
    <div class="box"><div class="label">10</div></div> 
    <div class="box"><div class="label">11</div></div> 
    <div class="box"><div class="label">12</div></div> 
</div> 

CSS：

.wrapper { 
    width: 100% 
} 

.box { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    text-align: center; 
    margin: 5px; 
    float: left; 
} 

.label { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.box:nth-child(5n+1) { 
    background-color: green; 
    clear: left; 
} 

Answer 1

最簡單的方法可能是使用Flexbox的。

在這裏，我在Code Pen上做了。您可以使用填充工具，如果你有兼容性問題與柔性盒

http://codepen.io/cjthedizzy/pen/wBpadE

.flex-container { 
    padding: 0; 
    margin: 0; 
list-style: none; 
flex-flow: row-reverse wrap-reverse; //THIS CHANGES THE FLOW TO REVERSE 
-ms-box-orient: horizontal; 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -moz-flex; 
display: -webkit-flex; 
display: flex; 
width:500px; 
background:#000; 
} 

填充工具 http://flexiejs.com/

Answer 2

你可以使用我的代碼，仍然不好，但工作不壞 my demo（只使用CSS）

<div style="" id="content"> 
    <div style="height: 50%; width: 100%; position: absolute; bottom: 0px;">    
     <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
      <li>5</li> 
      <li>6</li> 
      <li>7</li> 
      <li>8</li> 
      <li>9</li> 
      <li>10</li> 
      <li>11</li> 
      <li>12</li> 
      <li>13</li> 
      <li>14</li> 
      <li>15</li> 
      <li>16</li> 
      <li>17</li> 
      <li>18</li> 
      <li>19</li> 
      <li>20</li> 
     </ul> 
     </div> 
</div> 

CSS：

#content{ 
width: 200px; 
background: none repeat scroll 0% 0% rgb(237, 237, 237); 
height: 200px; 
position: relative; 
} 
#content li { 
    display: inline-block; 
    float: right; 
    margin: 0 5px; 
    transform: rotate(-180deg); 
} 
ul{ 
margin: 0px; 
list-style: outside none none; 
width: 100%; 
transform: rotate(180deg); 
padding: 0px 20px; 
float: left; 
bottom: 0px; 
box-sizing: border-box; 
}