3个div的宽度问题

发布于 2024-10-09 03:16:02 字数 1628 浏览 4 评论 0原文

我想在 html 中放置 3 个并行的 div。 div middle 的宽度应为 960px 和页面中心，div left 和 div right 将都是 div middle 的位置，页面最小宽度将为 1024px ，当浏览器宽度超过1024px，div left和div right可能宽度(100%-960px)/2时，overflow-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>

原文

I want to put 3 parallel divs in html. div middle should be the width of 960px and center of the page, div left and div right will be both site of the div middle,the page min-width will be 1024px, when the browser's width is more than 1024px,div left and div right maybe width (100%-960px)/2 the overflow-x is hidden. When the browser's width is equal and less than 1024, div left and div right maybe width 32px ((1024-960)/2=32px), overflow-x is scroll(the page width show 1024px. I use this code,but it can not adjust the width unless refresh the page. How to do dynamic adjustment width and overflow-x?
Thanks.

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紅太極 2024-10-16 03:16:02

尝试：

<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>

Try:

<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>

回复收藏 0 原文