|
<!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>固定中栏宽度, 左右两栏宽度相等同时自适应宽度 - Beautiful Style « 样式之美 » loaoao.com </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" />
<link rel="start" href="http://www.loaoao.com" title="Home" />
<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>
<div id="footer">
<p>Copyright © 2006 <a href="http://www.loaoao.com/">aoao</a> , <a href="http://www.creativecommons.cn/licenses/by-nc/2.5/" >Some Rights Reserved</a> .</p>
</div>
<!--统计 -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-600690-2";
urchinTracker();
</script>
</body>
</html>
|
