[英]How to dynamically resize 3 divs on window.resize?
我有以下HTML:
<div style="min-width:1024px;max-width:82%;margin:0 auto;overflow:auto">
<div style="height:344px;width:100%;float:left;margin-top:72px"></div>
<div style="width:100%;float:left;">
<div id="left" class="radius" style="height:700px;width:220px;background:#fff;float:left"></div>
<div id="middle" class="radius" style="width:760px;background:#fff;float:left;margin:0px 18px;">
<div style="height:700px;width:100%;float:left"></div>
</div>
<div id="right" class="radius" style="height:700px;width:280px;background:#fff;float:left"></div>
</div>
</div>
和脚本:
function scalling() {
var a = $(window).width();
if (a < '1300') {
var def = a * 82 / 100,
l = 22000 * def / 10,
m = 76000 * def / 10,
p = 28000 * def / 10;
$('#left').css('width', l);
$('#middle').css('width', m);
$('#right').css('width', p);
} else {
$('#left').css('width', '220px');
$('#middle').css('width', '760px');
$('#right').css('width', '280px');
}
}
scalling();
$(window).resize(function () {
scalling();
});
它可以工作,但是当窗口缩放到更大的div时会以较小的方式增加div的大小,而当窗口较小时div会更大
对不起,我很糟糕
您可以简单地使用以下CSS语句:
@media ( min-width :1300px){
selector{
width: constant-value;
}
}
@media ( max-width :1300px){
selector{
width: percent-value;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.