javascript - 使盒子在环绕 Angular 时以连续顺序出现(从左到右，向下，然后从右到左)

Question

有没有办法制作一堆不同的框来环绕页面，但通过不从右跳到左而是从右到左开始来保持顺序..

所以代替

A B C D E

F G H I

应该是这样的

A B C D E

  I H G F

盒子都是inline-block元素。

Answer 1

Demo

html

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>

CSS

div {
    width: calc(25% - 2px); /* adjust borders */
    height: 100px;
    background: red;
    display: inline;
    border: 1px solid black;
    text-align: center;
    line-height: 100px;
    color: white;
    float: left;
}
body, html {
    margin:0;
    padding:0;
}
div:nth-child(n+4) {
    float: right; /* this will make things as required */
}