DIV+CSS布局详细记录,中栏固定宽度,左右两栏宽度自适应

最简单的是div中间居中;可以用margin来实现;

.div1{
width: 500px;
height:100px;
background:orange;
margin: 0 auto;
/*margin必须的*/
}

中间栏固定,左右自适应;

代码如下,有点像双飞翼布局;

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<STYLE type="text/css">
*{ margin:0; padding:0; }
body{min-width:800px; }
/*header footer*/
#header,#footer{clear:both;padding:10px; text-align:center;background: orange; }
/*midel*/
#wrap div{float: left;}
#middle{width:600px; height: 200px; background-color:#ccc; }
#left, #right{ width:50%;margin: 0 0 0 -300px }
#innerLeft,#innerRight{margin:0 0 0 300px;background-color:#efefef;}
.inner {padding:12px;}
</STYLE>
</head>
<body>
<div id="header"><H1>固定中栏宽度, 左右两栏宽度相等和自适应</H1></div>
<div id="wrap">
<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>
<div id="footer"><H1>底部</H1></div>
</body>
</html>

“““

未经允许不得转载:朱邦邦的博客 » DIV+CSS布局详细记录,中栏固定宽度,左右两栏宽度自适应

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址