4

我有 3 个像

<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 显示左侧 150 像素，d3 显示右侧 150 像素，其余可用宽度显示 d2。

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

4

7 回答 7

4

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

你不能像这样得到你需要的宽度，但你可以设置它：

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

警告：如果用户调整他们的窗口大小（或任何其他改变视口大小的东西），你将需要更新这个值。您可能希望通过挂钩窗口调整大小事件来解决此问题：

$(window).on("resize", function() {
    $("#d2").width($(window).width() - $("#d1").width() - $("#d1").width);
});
于 2013-09-19T07:11:38.177 回答
1 
entireScreenWidth = screen.width
d1Width = $("#d1").width()
d2Width = $("#d2").width()

$("#d3").width(entireScreenWidth-d1Width-d2Width)
于 2013-09-19T07:14:18.347 回答
0

在您的场景中，您需要获取屏幕宽度并从屏幕宽度中扣除#d1 和#d3 的宽度。这个计算出的宽度可以分配给#d2。

于 2013-09-19T07:11:24.330 回答
0

您可以使用获取视口宽度

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

然后将宽度设置#d2为：

$('#d2').css('width', screenWidth - 300);
于 2013-09-19T07:11:28.553 回答
0 
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 部分所完成的。

于 2013-09-19T07:12:34.980 回答
0

你应该试试这个

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

});
于 2013-09-19T07:13:58.390 回答
0

如果您只是不浮动中间 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>

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

于 2013-09-19T07:14:03.830 回答