您的位置：首页 > Web前端 > JQuery

使用jquery进行三栏式布局,左右定宽,中间自适应代码

2013-01-19 09:45 411 查看

canrun

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
function pos(){
var jq = jQuery.noConflict();
var main =  jq(window).width();
var left =  jq(".left").width();
var right = jq(".right").width();
var middle = main - left- right;
jq(".middle").css("width",middle);
}
jq(document).ready(function(){
pos();
});

jq(window).resize(function() {
pos();
});
</script>
<style type="text/css">
/*<![CDATA[*/
*{margin:0px;padding:0px;}
/*]]>*/
</style>
</head>
<body>
<div class="width:100%;">
<div class="left" style="width:100px;background:#000;float:left;height:300px;">
 
</div>
<div class="middle" style="background:#f60;float:left;height:300px;">
 
</div>
<div class="right" style="width:100px;background:#000;float:right;height:300px;">
 
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

使用jquery进行三栏式布局,左右定宽,中间自适应 代码

使用jquery进行三栏式布局,左右定宽,中间自适应代码