Question

我试图使用浮动来实现这一点：

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

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

当B块小于500px可用空间时，B座应占用剩余空间并进入A座下方。我尝试了许多组合，负面margin解决方案，但都没有成功。

问题是当没有剩余空间时，css浮点数可以向下（堆栈），但仅在指定width时。如果未指定width，则占用剩余空间（这也是我需要的空间），但无法堆叠。我需要块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*/
}

Answer 2

解决方案：包含float: left的容器和包含overflow: hidden

的blockB

.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列

2 个答案: