在缠绕角落时（从左到右，向下，然后从右到左）使框子以连续顺序显示

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 */
}