检查所有 div 宽度并调整任何大于窗口的大小答案

【问题标题】：Check all divs widths and resize any bigger than window检查所有 div 宽度并调整任何大于窗口的大小
【发布时间】：2015-03-08 23:14:57
【问题描述】：

我有一个带有新响应模板的blog。我想检查帖子中的所有 div 以获取宽度大于窗口大小的任何 div，并仅将这些 div 的宽度更改为具有 max-width: windowssize。

事实是该博客有 350 多篇文章，我没有时间编辑每篇文章以删除那些固定宽度的 div 离开屏幕的文章。

我对 jQuery 和 js 不太擅长，但我得到了this 的代码，并且做到了这一点：

var div = $(".post div").width();
var win = $(window).width();

if (div > win ) {
    $(" ONLY THE DIV THATS BIGGER? ").css('max-width', ' WINDOW-WIDTH? ');  
}

但它正在改变所有 div 的大小。有什么想法吗？

[解决方案 - 无论如何，满足我的需要]

尽管你所有的 jQuery 代码都很棒，但我无法让它们中的任何一个在我想要的 div 上工作（但我相信它们会帮助人们将来看到这篇文章），所以我只是去了基本的CSS，它符合我的需要。我害怕在帖子宽度：100% 内统治所有 DIVS，因为它会影响嵌套的，所以我只是使用：

.post-body > * {
max-width:100% !important;
}

它只调用我帖子的所有直接子级，它已经与移动设备上的窗口大小相同，并设置规则 max-width 以防止离开屏幕。完美的！

感谢您的帮助！

【问题讨论】：

你必须遍历每个 div 然后设置宽度
那些大于视口宽度的<div> 元素的尺寸从何而来？是在 CSS 中还是在内联 style 或 width 中？

标签： javascript jquery blogger

【解决方案1】：

首先，您可能想开始使用循环来遍历变量“div”内的所有 div，也不要尝试立即执行宽度语句，而是获取所有 div

所以你的代码：

var div = $(".post div").width();
var win = $(window).width();

if (div > win ) {
    $(" ONLY THE DIV THATS BIGGER? ").css('max-width', ' WINDOW-WIDTH? ');  
}

应该变成这样：

var div = $(".post div");
var win = $(window).width();

for(var i=0; i<div.length;i++){
    if(div[i].width() > win){
        $(div[i]).css('max-width','WINDOW-WIDTH?');
    }
}

如果您想知道 div 到底是什么，请使用以下代码：

var div=$(".post div");
console.log(div);

【讨论】：

【解决方案2】：

试试

var win = $(window).width();
$(".post div").each(function () {

   if ( $(this).width() > win ) {
      $(this).css('max-width', win );  
   }

});

【讨论】：

【解决方案3】：

溢出的问题并非来自于此。实际上，它来自div 类linkwithin_inner，其中宽度已设置为680px 的固定宽度！important。

您应该在该页面上找到的 CSS 中将宽度更改为 100%。

.linkwithin_inner {
width: 100% !important;
}

问题就解决了。

【讨论】：

它总是无济于事，因为 div 可以嵌套并且具有固定宽度并且还取决于位置属性
是的，这也很重要！！但并不能解决帖子上更大的其他 div 的问题。我会发布我的解决方案。

【解决方案4】：

您需要过滤掉比窗口宽的 div，然后将最大宽度设置为仅那些，如下所示。

var winWidth = $(window).width();

$(".post div").filter(function(){
    return $(this).width() > winWidth
}).css({"max-width": winWidth + "px"});

她是a demo along 同一行

【讨论】：

【解决方案5】：

基本上你想循环通过这个 `$(".post div")' 找到的所有 div

归结为：

$(".post div").each(function () {
    $(this).width("50px");
});

这里你有一个工作小提琴： https://jsfiddle.net/gkLmx6d1/2/

【讨论】：