如何根据浏览器大小使div固定位置宽度调整大小

Question

我正在使用小型引导应用程序。 这里有两个div并排。第一个div是带引导表，第二个是图像。

我怀疑的是，如果我调整浏览器的大小，我可以如何确定他们的位置，但重新调整大小。

这是我的示例代码。

link

Answer 1

你必须更加详细。但我想我已经知道你要做什么......

您必须在浏览器上使用jquery resize事件。基本上是每次更改浏览器大小时调用的函数。

$(window).resize(function(){ /* BROWSER RESIZED. TO STUFF */ });

然后在该功能中，您可以获得浏览器的当前宽度或高度。并使用它来调整或重新定位您的div。

这是一个在页面上并排保留2个不同div的示例。你可以用CSS轻松完成，但这只是为了给你一个想法。

$(window).resize(function() {
  
  //Get browser width & height
  var browserWidth = $(window).width();
  var browserHeight = $(window).height();
  
  //Some computations for example
  var divWidth = browserWidth/2;
  
  //Change Div's width
  $("div1").css("width", divWidth+"px");
  $("div2").css("width", divWidth+"px");
  //Reposition Div 2
  $("div2").css("left", "50%");
  
});