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

【问题标题】：CSS: Have floating children react before floating parents on shrinking windowCSS：让浮动的孩子在缩小窗口的浮动父母之前做出反应
【发布时间】：2013-10-01 17:18:04
【问题描述】：

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

【问题讨论】：

您需要使用媒体查询设置断点。 P.s：添加相关的css和html标记是一个加号。

标签： css responsive-design css-float

【解决方案1】：

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

FIDDLE

标记

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

【讨论】：

谢谢，有帮助！我将第二个框 (.box2) 设置为 float:left。一旦我删除它，它就起作用了！

【解决方案2】：

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

你可以参考这个

1) Media_queries

2) css-tricks

【讨论】：

谢谢你，很好的参考。我将使用它们进行进一步的开发，因为布局会变得更加复杂，而媒体查询似乎正是我需要的东西！