CSS 列在调整大小时仅使用浮点数堆叠

Question

我正在尝试仅使用浮点数来实现此目的：

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

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

Block B 应该占用剩余的 space 并在可用的 space 中少于 500px 时进入 A 块下方。我尝试了很多组合，否定 margin 解决方案，但都没有成功。

问题是当没有 space 剩余时 css 浮点数能够向下（堆叠），但只有当指定 width 时。当不指定width时，块占用剩余的space（这也是我需要的），但不能堆叠。我需要 B 块的两个功能：在较小的屏幕上使用剩余的 space 并在 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*/
}

Answer 2

解决方案：容器 float: left 和 blockB overflow: hidden

.container {
    clear: left;
}
.blockA {
    border: 1px solid red;
    width: 300px;
    float: left; 
}
.blockB {
    border: 1px solid blue;
    min-width: 500px; 
    overflow: hidden;
}

<div class="container">
    <div class="blockA">blockA</div>
    <div class="blockB">blockB</div>
</div>

在 IE8 和 FF 中测试，完全按照我的问题中的描述工作。

CSS 列在调整大小时仅使用浮点数堆叠

CSS columns that stacks on resize using only floats

css

css-float

responsive-design