Question

我想在html中放入3个并行div。 div中间应该是960px的宽度和页面的中心，div left和div right将是div中间的站点，页面min-width将是1024px，当浏览器的宽度是超过1024px，div left和div右边宽度(100%-960px)/2溢出-x被隐藏。当浏览器的宽度相等且小于1024时，div left和div right可能是width 32px（(1024-960)/2=32px），overflow-x是scroll（页面宽度显示为1024px。我使用此代码，但除非刷新页面，否则无法调整宽度。如何做动态调整宽度和overflow-x？感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head> 
<body> 
<style> 
*{padding:0;margin:0;} 
#box {min-width:1024px; _width:960px;} 
#left {width:32px;float:left;background-color:blue;} 
#middle {width:960px;float:left;background-color:red;} 
#right {width:32px;float:left;background-color:green;} 
</style> 
<script> 
$(document).ready(function() { 
var width = document.body.clientWidth; 

if(width>1024){ 
$('#box').css({ 
width:width + 'px' 
});     
$('#left').css({ 
width:(width-1024)/2+32 + 'px' 
}); 
$('#right').css({ 
width:(width-1024)/2+32 + 'px' 
}); 
} 

}); 
</script> 
<div id="box"> 
<div id="left">1</div> 
<div id="middle">2</div> 
<div id="right">3</div> 
</div> 
</div> 
</body> 
</html>

Answer 1

尝试：

<script> 
$(document).ready(function() { 
  var width = document.body.clientWidth;
  windowResize(width);
  $(window).resize(function() { 
    windowResize(width);   
  });
});

function windowResize(width) {
  if(width>1024){ 
    $('#box').css({ 
      width:width + 'px' 
    });     
    $('#left').css({ 
      width:(width-1024)/2+32 + 'px' 
    }); 
    $('#right').css({ 
      width:(width-1024)/2+32 + 'px' 
    }); 
  } 
}
</script>

Answer 2

您可以通过将一些javascript代码绑定到resize事件来执行此操作：

http://api.jquery.com/resize/

3个div的宽度问题

2 个答案: