gpt4 book ai didi

CSS responsive : shrink some divs first, 然后其他等等

转载 作者:行者123 更新时间:2023-11-28 02:09:02 24 4
gpt4 key购买 nike

当屏幕宽度减小时,我想设置一个优先顺序,首先、第二、第三等 div 缩小?

例如我有连续的“建筑物”(表格或 flexbox ),每对之间有“间隙”,最左边和最右边有一个自动边距。

随着屏幕宽度的缩小:1. 首先,将边距宽度减小到 0。2. 然后,将“间隙”宽度从 125px 减小到 30px。3. 然后,开始将“构建”宽度减小到首选宽度 (125px) 以下

我认为设置 min-width:125px 和 max-width:30px 会做到这一点,但不是。

body {
margin: 0;
padding: 0;
}

.holder {
display: table;
background-color: pink;
margin: auto;
}
.top {
display: table-row;
width: 100%;
background-color: blue;
}
.bottom {
display: table-row;
background-color: rgb(100,100,100);
}
.top_buildings {
display: table;
width: 100%;
}
.building {
display: table-cell;
background-color: rgb(100,100,100);
width: 125px;
height: 30px;
}
.gap {
display: table-cell;
width: 125px;
min-width: 30px;
background-color: rgb(200,200,200);
}
<div class="holder">
<div class="top">
<div class="top_buildings">
<div class="building">Building A</div>
<div class="gap"></div>
<div class="building">Building B</div>
<div class="gap"></div>
<div class="building">Building C</div>
<div class="gap"></div>
<div class="building">Building D</div>
<div class="gap"></div>
<div class="building">Building E</div>
<div class="gap"></div>
<div class="building">Building F</div>
</div>
</div>
<div class="bottom">
bottom
</div>
</div>
<br>
<div class="holder">
<div class="top">
<div class="top_buildings">
<div class="building">Building A</div>
<div class="gap"></div>
<div class="building">Building B</div>
<div class="gap"></div>
<div class="building">Building C</div>
</div>
</div>
<div class="bottom">
bottom
</div>
</div>
<br>
<div class="holder">
<div class="top">
<div class="top_buildings">
<div class="building">Building A</div>
<div class="gap"></div>
<div class="building">Building B</div>
</div>
</div>
<div class="bottom">
bottom
</div>
</div>

最佳答案

使用 CSS3 实现响应式设计 media queries使用 max-widthmin-width 选择器。

通过这种方式,您可以根据屏幕尺寸对类应用不同的样式,从而为缩小优先级设置规则。

关于CSS responsive : shrink some divs first, 然后其他等等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48863526/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com