仅使用 float 在调整大小时堆叠的 CSS 列

Question

我试图只使用 float 来实现这一点:

|A******* B******************|
|*300px * * auto            *|
|*      * *                 *|
|******** *******************|

|A*******     |
|*300px *     |
|*      *     |
|********     |
|B************|
|* auto      *|
|*           *|
|*************|

当 block B 的可用空间小于 500px 时， block B 应占用剩余空间并放在 block A 的下方。我尝试了很多组合，负 margin 解决方案，但都没有成功。

问题是 css float 能够在没有剩余空间时下降(堆叠)，但只有在指定了 width 时。当width不指定时， block 占用剩余空间(这也是我需要的)，但不能堆叠。我需要 block B 的两个功能:占用剩余空间并在较小的屏幕上位于 A 下方。

如果没有旧浏览器(IE8+ 和没有 JS)不支持的媒体查询和其他功能，您有什么建议？

起点:

<div id="blockA">
    blockA
</div>
<div id="blockB">
    <p>blockB</p>
    <p id="stopper">stopper</p>
</div>

#blockA {
    border: 1px solid powderblue;
    width: 300px;
    float: left;
}
#blockB {
    border: 1px solid khaki;
    margin-left: 300px;
}
#blockB > p#stopper {
    width: 500px;
    border: 1px solid blue;
}

请参阅下方的解决方案。

Answer 1

这将有助于:

#blockA {
    border: 1px solid powderblue;
    width: 100px;
    float: left; /*YOU WERE NOT FLOATING THE DIV B*/
}