两栏布局

1、

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>两栏布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.left{
			position: absolute;
			width: 600px;
			height: 100px;
		}
		.right{
			margin-left: 600px; 
			height: 100px;
		}
	</style>
</head>
<body>
<div class="left">左边部分</div>
<div class="right">右边部分</div>
</body>
</html>

 示例2、

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>两栏布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.right{
			position: absolute;
			right: 0;   /*会让两个div交换位置*/
			height: 100px;
			width: 100px;
		}
		.left{
			margin-left: 100px;   /*右边留出间距，防止被覆盖*/
			height: 100px;
		}
	</style>
</head>
<body>
<div class="right"></div>
<div class="left"></div>
</body>
</html>

 

posted @ 2018-03-11 20:21  小小鱼7  阅读(147)  评论(0)    收藏  举报