固定中栏宽度, 左右两栏宽度相等和自适应

>首页 -> 社会专题 -> 代码效果 2015-10-08 来源:百度作者:百度【大中小】浏览:568次评论:0条

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

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

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

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>CSS布局：中栏固定宽度,左右两栏宽度相等同时自适应宽度-鸽码</title>
<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>

提示：您也可以先修改部分代码再运行！

您看到此篇文章时的感受是：

Tags：用

责任编辑：佚名

【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

酒精度

顶一下

上一篇：CSS简单重叠线效果

下一篇：CSS布局：右栏固定宽度,左栏内容..

手机扫描

空间赞助

快速互动

有事联系

统计联系

版权与建议