css - CSS：让浮动的孩子在缩小窗口的浮动父母之前做出反应

Question

我有两个带有 display:inline-block 和 width:auto 的浮动 div（“适应内容”）。在第二个 div 内，有两个浮动子 div。是否可以指定“浮动顺序”，以便子 div 在父母使用 CSS 之前对缩小的浏览器窗口做出反应？（见附图）。感谢您的任何建议！

Answer 1

尝试为此目的使用媒体查询。

你可以参考这个

1)媒体查询

2）CSS技巧

Answer 2

尝试这个。正如其他人所提到的，您可能需要媒体查询来微调它。

小提琴

标记

<div class="box1"></div>
<div class="box2">
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

.box1
{
    width: 48%;
    height: 300px;
    background: blue;
    float:left;
    margin: 0 10px 30px 0;
    min-width: 150px;
    overflow: auto;
}
.box2
{
    width: 40%;
    height: 250px;
    background: blue;
    overflow: hidden;
    max-width: 250px;
    min-width: 120px;

}
.box
{
    background: aqua;
    float:left;
    width: 100px;
    height: 100px;
    margin: 10px;
}