在容器中将div放在彼此之上，然后浮动额外的div

Question

例如，我在容器中有3个div。容器有一个固定的高度。我希望具有动态高度的内部div被定位在彼此之上，然后不适合其他div下容器中的其余div将被浮动，就好像有第二列一样。

<div style="" class="Continer">
    <div class="d1">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
    </div>
    <div class="d2">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
    </div>
    <div class="d3">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />  
        text text text <br />
    </div>

请检查此fiddle

所以在上面的小提琴中我希望第三个div动态浮动，因为它不适合容器中的其他div。

我怎样才能实现

Answer 1

您可以尝试使用flexbox来执行此操作。

的 UPDATED JSFIDDLE

＆＃13;

＆＃13;

.container{
    background:yellow;
    height: 250px;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}
.d1{
    background: red;
    width: 100px;
}
.d2{
    background: blue; 
    width: 100px;
}
.d3{
    background: green;
    width: 100px;
}

＆＃13;

<div class="container">
    <div class="d1">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
    </div>
    <div class="d2">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />
    </div>
    <div class="d3">
        text text text <br />
        text text text <br />
        text text text <br />
        text text text <br />  
        text text text <br />
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;