Question

要根据窗口大小更改Div宽度，我用google搜索并尝试使用以下JQuery脚本（来自stackoverflow帖子的组合答案）：

JQuery脚本：

<script>  
function checkWindowSize() {  
    if ($(window).width() > 1800) {  
        $('#divwidth').addClass('large');  
    }  
    else {  
        $('#divwidth').removeClass('large');  
    }  
}  
$(window).resize(checkWindowSize);     
</script>

CssClass：

#divwidth{  
    width: 1200px;
}  
#divwidth .large{  
    width: 2200px;
}

这是我使用该课程的HTML：

<div style="text-align: left; margin-left:auto;margin-right:auto;  overflow-x:auto;" ID="divwidth">

<!-- my gridview here -->
</div>

似乎无法设置Div宽度。改变给予脚本类型＆＃34; text / Javascript＆＃34;也没有帮助。

Answer 1

我认为你不需要jQuery。你可以将宽度设置为百分比，就像在这个jsfiddle https://jsfiddle.net/n3gw5613/

中一样

.divWidth {
    float:left;
    width:50%;
    margin:0 25%;
    padding:15px;
    background:#aa0000;
    color#000;
}

或使用此jsfiddle https://jsfiddle.net/90jaxah9/1/

中的媒体查询

.divWidth {
    float:left;
    width:350px;
    margin:0 25%;
    padding:15px;
    background:#aa0000;
    color#000;
}
@media only screen and (max-width:320px) {
   .divWidth {
       width:100px;
       margin:0;
    }
}

拖动并调整浏览器大小以查看更改

Answer 2

CSS选择器出现问题。

你有这个：

.large #divwidth{  
    width: 2200px;
}

你说你想要一个id为divwidth的元素WITHIN THE ELEMENT with class large

你需要这个：

#divwidth.large{  
    width: 2200px;
}

这样你就说你想要id为divwidth且类为big

的元素

Answer 3

您遇到的问题是@ kpucha的问题是实施他的建议错误。在 CSS 中，仍有空格（＆＃39;＆＃39;）更改CSS的含义。您的代码是：

#divwidth .large{  
    width: 2200px;
}

它应该在哪里：

#divwidth.large{  
    width: 2200px;
}

不同之处在于，您的规则适用于#divwidth 的后代 类large。相反，它应该适用于也具有类#divwidth的{{1}}元素。

最佳方式可能是 CSS媒体查询，如下所示：

large

当#divwidth { width: 1200px; } @media (min-width:1800px) { #divwidth { width: 2200px; } }小于div时，这会导致1200px width为viewport。

使用Jquery更改div宽度

3 个答案: