css使浮动div垂直堆叠

Question

是否有可能让正确的浮动div总是“叠加”在彼此之下？

例如，我试图做这样的事情：

> ---------------------------------+
> |Container div           |   div1|
> |Fixed width             +--+----+ 
> |                           |div2|
> |                      +----+----+
> |                      |     div3|
> |                      +---------+
> |                                |
> +--------------------------------+

Div1,2和3是可变的宽度和高度。如果我只是将它们漂浮在一起，它们就不会像那样堆叠起来，有时div2会放在div1的左边等等，因为布局试图最小化容器的高度。我希望他们永远在彼此之间叠加。

Answer 1

这些css规则应该将它们对齐并堆叠

.div1, .div2, .div3{
    float: right;
    clear: right;
}

见example fiddle。

截图

来源

.div1, .div2, .div3{
    float:right;
    clear:right;
}
.div2{
    background-color:green;
    width: 300px;
    height: 20px;
}
.div1{
    background-color:blue;
    width: 100px;
    height: 30px;
}
.div3{
    background-color:red;
    width: 80px;
    height: 40px;
}

.container{
    background-color: gray;
    width: 400px;
    height: 400px;
}

Answer 2

在DIV，div1，div2周围放置一个div3包装，并在设置div1，div2，{时让包装器浮动{1}}至div3和display: block