慕课网 absolute 实现左右布局

使用absolute实现横向两列布局
常用于一列固定宽度,另一列宽度自适应的情况,
注意!!!!固定宽度的列的高度 > 自适应宽度列的高度
设置绝对定位的块的高度低一点。
主要应用技能:
relative-父元素相对定位。

absolute-自适应宽度元素绝对定位(记得设置偏移量!!)。


慕课网 absolute 实现左右布局_第1张图片

慕课网 absolute 实现左右布局_第2张图片

我的代码:

<!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>左右布局</title>
<style>
*{
	font-size:12px; 
	color:#346667; 
	font-family:Arial, Helvetica, sans-serif,"宋体";
}
.wrap{
	margin:0 auto; /*垂直居中*/
	width:1000px;
}
.head{
	width:100%;
	background-color:#f00;
}
#mainbody{
	width:100%;
	background-color:#0f0;
	margin-top:10px;
	margin-bottom:10px;
	position:relative;/*父元素绝对定位*/
}
#sidebar{
	background-color:#abc;
	width:180px;
	padding-bottom:10px;
}
#content{
	background-color:#312;
	position:absolute;/*子元素相对布局*/
	top:0; /* 紧挨着mainbody */
	margin-left:200px;
}
.foot{
	/*clear:both;*/
	width:100%;
	background-color:#00e;
}
.head p{
	margin-bottom:0px;
}
</style>
</head>
<body>
	<div class="wrap">
		<div class="head">
			头部
			<p>1</p>
		</div>
		<div id="mainbody">
			主体
			<div id="sidebar">
				左部分
				<ul>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
				</ul>
			</div>
			<div id="content">
				右部分sdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				<p>2</p>
				<p>2</p>
			</div>
		</div>
		<div class="foot">
			底部
			<p>1</p>
			<p>1</p>
			<p>1</p>
			<p>1</p>
		</div>
	</div>
</body>
</html>
运行截图:

慕课网 absolute 实现左右布局_第3张图片

你可能感兴趣的:(慕课网 absolute 实现左右布局)