как получить максимальную ширину доступной для DIV с помощью JQuery

Question

У меня есть 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.

Пожалуйста, дайте мне знать, как мы это делаем ????

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

В вашем сценарии вам необходимо получить ширину экрана и вычесть ширину # d1 и # d3 из ширины экрана. Эта рассчитанная ширина может быть присвоена # d2.

Answer 3

Вы можете получить ширину окна просмотра, используя

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

Затем установите ширину для #d2 как:

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

Answer 4

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 5

вы должны попробовать это

$(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 6

Если вы просто не плаваете средний 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> 

Если у вас нет требований, о которых вы нам не говорили, это должно сделать это.

Answer 7

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

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