纯 CSS 框以特定方式折叠

Question

我需要折叠 div（左：徽标、横幅，右：按钮组 A、按钮组 B）

我希望这些根据屏幕尺寸以特定方式折叠：

B 组按钮折叠
横幅折叠

如果屏幕分辨率超高我想要左边banner+logo（红+绿），中间空白space，右边两个按钮组（蓝+紫）

见下图：

这是我目前尝试过的方法：

https://jsfiddle.net/ey74wud6/

老实说这是反复试验，盒子倒塌的方式对我不利。

<style>
    /* just example - color, fixed size of box */
    .green { background: green; width: 80px; height: 70px; }
    .red { background: red; width: 270px; height: 70px; }    
    .purple { background: purple; width: 70px; height: 70px; }
    .blue { background: blue; width: 70px; height: 70px; }
    .box { margin: 2px; }

    /* proper css experiments */

    .left {
        float: left;
    }

    .left .box {
        float: left;
    }

    .right {
        float: right;
    }

    .right .box {
        float: left;
    }
</style>

<div class="left">        
    <div class="box green"></div>
</div>

<div class="left">        
    <div class="box red"></div>
</div>

<div class="right">        
    <div class="box purple"></div>
</div>

<div class="right">        
    <div class="box blue"></div>
</div>

我知道我可以在 javascript 的帮助下做到这一点，但我的问题是可以使用纯 CSS?[= 来解决我的问题14=]

任何帮助将不胜感激

Answer 1

你需要的是display:flex

您可以定义 flex-shrink/grow 并将其与灵活元素上的最大宽度和最小宽度组合。

你可以将它与媒体查询结合起来

Answer 2

您可以为此使用 css 媒体查询。查看修改后的示例：https://jsfiddle.net/ey74wud6/1/

我稍微修改了您的 css 代码，但最重要的部分是：

@media (max-width: 454px) {
    .left {
         width : 280px;
    }

    .right {
        width: 80px;
    }
}

@media (min-width: 455px) and (max-width: 522px) {
    .left {
         width : 360px;
    }

    .right {
        width: 80px;
    }
}

您可以根据需要替换值

纯 CSS 框以特定方式折叠

Pure CSS box collapse in specific way

html

css

responsive-design