3个div的宽度问题答案

【问题标题】：the width problem of 3 divs3个div的宽度问题
【发布时间】：2010-12-26 05:35:22
【问题描述】：

我想在 html 中放置 3 个并行 div。 div middle 应该是960px 的宽度和页面的中心，div left 和 div right 都是 div middle 的站点，当浏览器的宽度大于@987654323 时页面最小宽度为1024px @,div left 和 div right 也许宽度 (100%-960px)/2 溢出-x 是隐藏的。当浏览器的宽度等于并且小于1024时，div left和div right可能是宽度32px（(1024-960)/2=32px），overflow-x是滚动（页面宽度显示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>

【问题讨论】：

这似乎是一个 JavaScript 问题，而不是 CSS。特别是 jQuery。

标签： javascript jquery css width overflow

【解决方案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>

【讨论】：

【解决方案2】：

您可以通过将一些 javascript 代码绑定到 resize 事件来做到这一点：

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

【讨论】：

我不知道 resize 事件。我会读这篇文章。或者如果有人可以修改我的代码，我可以清楚地知道。