使用CSS/JS从左到右堆叠框

Stacking boxes left to right from the bottom with CSS/JS

本文关键字：从左到右 JS CSS 使用      更新时间：2023-09-26

我需要从左到右（自下而上）堆叠方框，并尽可能简单地做到这一点（纯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;
}

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

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

这是我用代码笔做的。如果您与柔性盒存在兼容性问题，则可以使用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;
 }

Polyfillhttp://flexiejs.com/

相关文章：