Question

我有3个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>

现在我想动态设置d2 div宽度，并使用jquery按照屏幕分辨率设置最大值。

我尝试jQuery('#d2').width()，但它只给我们实际保持宽度。

我想显示我的网页屏幕，如d1表示150px左起，d3表示150px表示正确，其余部分可用于d2。

请让我知道我们该怎么做????

Answer 1

默认情况下，<div>仅填充浮动时所需的空间。

你不能获得你需要的宽度，但你可以设置它：

$("#d2").width($(window).width() - $("#d1").width() - $("#d1").width);

警告：如果用户调整其窗口大小（或其他任何内容以更改视口大小），则需要更新此值。你可能想通过挂钩窗口调整大小事件来解决这个问题：

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

Answer 2

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

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

Answer 3

在您的场景中，您需要获得屏幕宽度并从屏幕宽度中减去＃d1和＃d3的宽度。此计算的宽度可以分配给＃d2。

Answer 4

您可以使用

获取视口宽度

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

然后将#d2的宽度设置为：

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

Answer 5

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

根据建议，我会打破这一点：

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

Math.max需要N个参数，所以你必须把它称为：Math.max（200,300,250,100,400），这是Math.max.apply片段所完成的。

Answer 6

你应该试试这个

$( 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" );
}

});

Answer 7

如果你只是不浮动中间div，并将浮动的那个放在它之前，你将不需要任何Javascript，因为浏览器可以自己处理它。

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

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

如何使用jquery获取div的max-width

7 个答案: