html – 纯CSS框以特定方式折叠

2023年3月19日 242次阅读

我需要折叠div(左：徽标,横幅,右：按钮组A,按钮组B)

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

>按钮组B崩溃
>横幅崩溃

如果屏幕分辨率超高,我想在左侧(红色绿色),中间的空白区域和右侧的两个按钮组(蓝色紫色)上有横幅标志

见下图：

这是我到目前为止所尝试的：

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来解决我的问题吗？

任何帮助将不胜感激

最佳答案 您可以使用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;
    }
}

您可以替换值以满足您的需求

点赞