会员中心
用户名：    密码：    验证码：      免费注册会员

jquery手册   CSS2手册       请关注健康

CSSer > 客户端开发 > web标准与前台开发 > 固定中栏宽度, 左右两栏宽度相等和自适应

来源：lab.loaoao.com 作者： 发布时间：2007-03-18
雅虎收藏夹 百度收藏 Google书签 Yahoo书签 新浪ViVi 搜狐网摘 365Key网摘 天极网摘 diglog 和讯网摘 POCO网摘 YouNote网摘 博拉网 天下图摘 Del.icio.us digg reddit spurl BlinkList blogmarks

 

表现:

中间一栏居中与固定宽度，左右两栏宽度相等同时自适应宽度。

原理:

利用margin的负值错别固定的宽度，因为要分两边，所以只要错开一中间的固定宽度就行

问题:

IE对宽度乘百分比的计算不大好，有必要牺牲一两px的显示，IE6也没最小宽度。

以下为引用的内容：
<!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">
<head>
<title>固定中栏宽度, 左右两栏宽度相等同时自适应宽度</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="KEYWords" content="-,css,xhtml,effect" />
<meta name="DEscription" content="-" />
<meta name="author" content="aoao" />
<meta content="all" name="robots" />
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
min-width:620px;
}
#header,#footer{
clear:both;
padding:10px;
text-align:center;

}
#left,
#right{
float:left;
width:50%;
margin:0 0 0 -151px;
}
#innerLeft,
#innerRight{
margin:0 0 0 151px;
background-color:#efefef;
}
#middle{
float:left;
width:300px;
background-color:#ccc;
}
.inner {
padding:12px;
}
</style>
</head>
<body>
<div id="header">
<h1>固定中栏宽度, 左右两栏宽度相等和自适应</h1>
</div>
<div id="left">
<div id="innerLeft" class="inner">

<p><strong>表现:</strong>中间一栏居中与固定宽度，左右两栏宽度相等同时自适应宽度。</p>
</div>
</div>
<div id="middle">
<div id="innerMiddle" class="inner">
<p><strong>原理:</strong>利用margin的负值错别固定的宽度，因为要分两边，所以只要错开一中间的固定宽度就行</p>
</div>
</div>
<div id="right">
<div id="innerRight" class="inner">
<p><strong>问题:</strong>IE对宽度乘百分比的计算不大好，有必要牺牲一两px的显示，IE6也没最小宽度。</p>
</div>
</div>
</body>
</html>


相关文章