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

Answer 2

在你的,周围放置一个DIV包装器，并让包装器在设置,时浮动div1div2div3div1div2div3display: blockfloat: none