html - CSS 内联 block 元素环绕

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;
}

fiddle :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 .我还必须设置元素的自定义顺序。