常见UI布局之1-2-1单列变宽布局

最新推荐文章于 2024-06-16 17:41:25 发布

weixin_30542079

最新推荐文章于 2024-06-16 17:41:25 发布

阅读量150

点赞数

文章标签： ui xhtml

原文链接：http://www.cnblogs.com/omilan/p/3591223.html

版权

扩展前一篇“上中下三栏布局”，中间栏划分成两列，一列宽度固定，一列宽度随浏览器窗口宽度的变化而变化。固定宽度列定义为#side，可分为左侧布局和右侧布局，分别实现如下：

1-2-1左侧固定宽度布局

<!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=utf-8" />
<title>1-2-1左侧固定宽度布局</title>
<style type="text/css">
html, body, .container {margin:0;padding:0;height: 100%;text-align:center;}
body > .container {height: auto; min-height: 100%;}
#main {height: 100%;padding-bottom: 35px;}  /* 必须使用和footer相同的高度 */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0;}
.clearfix{display:inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
#contentWrap {float: left;width: 100%;height:100%;}
#content {margin-left: 300px;}
#side{float:left;margin-left:-100%;height:100%;position:relative;width: 300px;}
#footer{height: 35px;line-height: 35px;text-align: center;position:relative; margin-top: -35px;clear:both;}
#header{height:90px;background-color:#666666;}
#content{background-color:#888888;}
#side{background-color:#777777;}
#footer{background-color:#999999;}
</style>
</head> 
<body>
	<div class="container">
	    <!-- 头部 -->
            <div id="header">header</div>
            <div id="main" class="clearfix">
                <div id="contentWrap">
			<div id="content">content</div>
	        </div>
		<div id="side">side</div>
	    </div>
	</div>
	<!-- 底部 -->
	<div id="footer">footer</div>
</body>
</html>

1-2-1右侧固定宽度布局

<!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=utf-8" />
<title>1-2-1右侧固定宽度布局</title>
<style type="text/css">
html, body, .container {margin:0;padding:0;height: 100%;text-align:center;}
body > .container {height: auto; min-height: 100%;}
#main {height: 100%;padding-bottom: 35px;}  /* 必须使用和footer相同的高度 */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0;}
.clearfix{display:inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
#contentWrap {margin-left: -300px;float: left;width: 100%;}
#content {margin-left: 300px;}
#side {float: right;width: 300px;}
#footer{height: 35px;line-height: 35px;text-align: center;position:relative; margin-top: -35px;clear:both;}
#header{height:90px;background-color:#666666;}
#content{background-color:#888888;}
#side{background-color:#777777;}
#footer{background-color:#999999;}
</style>
</head> 
<body>
	<div class="container">
            <!-- 头部 -->
            <div id="header">header</div>
            <div id="main" class="clearfix">
                <div id="contentWrap">
		    <div id="content">content</div>
		</div>
		<div id="side">side</div>
	    </div>
	</div>
	<!-- 底部 -->
	<div id="footer">footer</div>
</body>
</html>

转载于:https://www.cnblogs.com/omilan/p/3591223.html

weixin_30542079

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见UI布局之1-2-1单列变宽布局

扩展前一篇“上中下三栏布局”，中间栏划分成两列，一列宽度固定，一列宽度随浏览器窗口宽度的变化而变化。固定宽度列定义为#side，可分为左侧布局和右侧布局，分别实现如下： 1-2-1左侧固定宽度布局<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio...
复制链接

扫一扫