我需要折叠 div(左: Logo 、横幅,右:按钮组 A、按钮组 B)
我希望这些根据屏幕尺寸以特定方式折叠:
- B 组折叠按钮
- 横幅折叠
如果屏幕分辨率超高我想左边有banner+logo(红+绿),中间空白,右边两个按钮组(蓝+紫)
见下图:
这是我目前尝试过的:
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;
}
}
您可以根据需要替换值
关于html - 纯 CSS 框以特定方式折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29767955/