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

你可以使用我的代码，但仍然不好但工作不错 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;
}

Answer 2

最简单的方法可能是使用flexbox。

我在Code Pen上完成了这项工作。如果与弹性框的兼容性问题

，则可以使用polyfill

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/

使用CSS / JS从底部向左堆叠框

2 个答案: