在容器内将 div 相互定位，然后浮动额外的 div

Question

例如，我在一个容器中有 3 个 div。容器具有固定的高度。我希望具有动态高度的内部 divs 相互定位，然后将不适合其他 divs 下方容器的剩余 divs 浮动为如果有第二列。

<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

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

我怎样才能做到这一点

Answer 1

您可以尝试使用 flexbox 来完成。

UPDATED JSFIDDLE

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

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

在容器内将 div 相互定位，然后浮动额外的 div

Position divs over each other within a container then float extra divs

css

overflow

css-float