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

见示例小提琴.

截图

资源

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