页面布局 - 三栏 - 中间栏固定 - 左右两栏自适应

最新推荐文章于 2024-07-11 22:36:37 发布

TiFaLockhart

最新推荐文章于 2024-07-11 22:36:37 发布

阅读量157

点赞数

分类专栏： HTML CSS 文章标签： html css

本文链接：https://blog.csdn.net/TiFaLockhart/article/details/84440371

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中栏固定宽度,左右两栏宽度相等同时自适应宽度</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>

代码转载自：[url]http://www.zzsck.org/js/css/1185.html[/url]

TiFaLockhart

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面布局 - 三栏 - 中间栏固定 - 左右两栏自适应

[code="java"]中栏固定宽度,左右两栏宽度相等同时自适应宽度*{ margin:0; padding:0;}body{ font-family:Verdana, Arial, Helvetica, sans-serif; min-width:620px;}#header,#footer{ clear:both; paddin...
复制链接

扫一扫