CSS内联块项目环绕

Question

不使用绝对定位，是否可以在下面的图2 中实现效果？

具体来说，框4如何能够像图2 一样紧贴在方框1下方，而不是像图1 中的新线一样。

HTML

<div class="calendar">
    <div class="apt" style="height: 200px;">1</div>
    <div class="apt" style="margin-top: 20px;">2</div>
    <div class="apt" style="margin-top: 60px; height: 100px">3</div>
    <div class="apt" style="height: 200px">4</div>
    <div class="apt">5</div>
</div>

CSS

.apt
{
    height: 60px;
    width: 60px;
    background-color: #ccc;
    margin: 4px;
    display: inline-block;
    float: left;
}
.calendar
{
    width: 160px;
    height: 600px;
    background-color: #666;
}

小提琴：http://jsfiddle.net/5gdyab10/

Answer 1

您可以使用 flexbox 来实现此目的。

演示： http://jsfiddle.net/5gdyab10/4/

<强> HTML

<div class="calendar">
    <div class="apt" style="height: 200px; order: 1;">1</div>
    <div class="apt" style="order: 3; margin-top: 20px;">2</div>
    <div class="apt" style=" height: 100px; order: 4; margin-top: 60px;">3</div>
    <div class="apt" style="height: 200px; order: 2;">4</div>
    <div class="apt" style="order: 5;">5</div>
</div>

<强> CSS

.apt
{
    height: 60px;
    width: 60px;
    background-color: #ccc;
    margin: 4px;
}

.calendar
{
    width: 160px;
    height: 490px;
    background-color: #666;
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap;
}

我减少了容器的高度，因此项2会转到其他列，但您可以执行此操作或增加项height和1或4 2 }。我还必须设置自定义项目顺序。