Javascript 如何使用jquery获取div的最大可用宽度

我有三个像

<div id="d1" style="float:left;width:150px;">
asdqwe
</div>
<div id="d2" style="float:left;">
qwerty
</div>
<div id="d3" style="float:right;width:150px;">
poilkj
</div>

asdqwe
qwerty
波伊尔基

现在我想使用jquery动态设置d2 div width，并根据屏幕分辨率设置最大可用宽度

我尝试了

jQuery（'#d2'）.width（）

，但它只提供了实际保持宽度

我想显示我的网页屏幕，如d1为150px从左到右，d3为150px从右，其余的可用widht为d2

---

请让我知道我们如何做？？？

在您的场景中，您需要获得屏幕宽度，并从屏幕宽度中扣除#d1和#d3的宽度。此计算出的宽度可以指定给#d2。

您可以使用

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

然后将

#d2

的宽度设置为：

$('#d2').css('width', screenWidth - 300);

默认情况下，

仅填充浮动时所需的空间

您无法像这样获得所需的宽度，但可以设置：

请注意：如果用户调整窗口大小（或其他任何更改视口大小的操作），则需要更新此值。您可能希望通过挂接窗口调整大小事件来解决此问题：

$(window).on("resize", function() {
    $("#d2").width($(window).width() - $("#d1").width() - $("#d1").width);
});

根据建议，我将对此进行细分：

$('#d2').map(function(){
   return $(this).width();
}).get();

Math.max接受N个参数，因此您必须将其命名为：Math.max（200300250100400），这就是Math.max.apply块所实现的功能。

您应该试试这个

$( document ).ready( function(){
setMaxWidth();
$( window ).bind( "resize", setMaxWidth ); //Remove this if it's not needed. It will react when window changes size.

function setMaxWidth() {
$( "#d2" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}

});

---

如果不浮动中间的div，并将浮动的div放在源代码的前面，那么就不需要任何Javascript，因为浏览器可以自己处理这个问题

asdqwe
波伊尔基
qwerty

---

除非您有未告诉我们的要求，否则应该这样做。

遵循以下步骤：但在这种情况下，

d2

将填充所有可用空间，而不仅仅是插入浮动div后剩余的空间，例如，能够给DIV不同的背景颜色可能是OP没有告诉我们的要求之一。无论如何，你可以通过给所有的div明确的背景颜色来解决这个问题：对不起，背景只是为了演示。要求是我想显示我的网页屏幕，如d1从左至150px，d3从右至150px，其余可用widht从d2。但是，嘿，谁知道呢？这不是很清楚：）的确。根据OP的实际需要，我的答案可能是也可能不是解决方案。我很确定，不管有什么要求，都有一个不需要JS的解决方案。

entireScreenWidth = screen.width
d1Width = $("#d1").width()
d2Width = $("#d2").width()

$("#d3").width(entireScreenWidth-d1Width-d2Width)

$( document ).ready( function(){
setMaxWidth();
$( window ).bind( "resize", setMaxWidth ); //Remove this if it's not needed. It will react when window changes size.

function setMaxWidth() {
$( "#d2" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}

});

entireScreenWidth = screen.width
d1Width = $("#d1").width()
d2Width = $("#d2").width()

$("#d3").width(entireScreenWidth-d1Width-d2Width)