Question

我有以下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增加大小，因为biger div更小，而当窗口更小时，div更大

抱歉，我的心情不好

Answer 1

你可以简单地使用这个CSS语句：

@media ( min-width :1300px){
    selector{
        width: constant-value;
    }
}

@media ( max-width :1300px){
    selector{
        width: percent-value;
    }
}

如何在window.resize上动态调整3个div的大小？

1 个答案: