css布局之两列布局

最新推荐文章于 2024-06-11 12:15:54 发布

weixin_30721899

最新推荐文章于 2024-06-11 12:15:54 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/kevinlifeng/p/5153081.html

版权

我们见过两列布局的网站也很多，不过这种两列布局的分为两种：自适应和固定宽度

1.自适应两列布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列之自适应布局</title>
</head>
<style>
  .left{
  	float: left;
  	width: 20%;
  	height: 300px;
  	background-color: #ccc;

  }
  .right{
  	float: right;
  	width: 80%;
  	height: 300px;
  	background-color: #198610;
  }
</style>
<body>
	<div class="left"></div>
	<div class="right"></div>
	
</body>
</html>

　高度其实在开发中是不要加入的，因为这里是为了更加好的展示这个demo所以设置了高度。这个demo就是自适应的，根据页面的的宽度自动调整左右两列的宽度，大家可以试试。

2.下面是一个固定，一个自适应的两列布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列之固定左列布局</title>
</head>
<style>
  .left{
  	float: left;
  	width: 200px;
  	height: 300px;
  	background-color: #ccc;

  }
  .auto-right{
  	margin-left: 200px;
  	height: 300px;
  	background-color: #198610;
  }
</style>
<body>
	<div class="left"></div>
	<div class="auto-right"></div>
	
</body>
</html>

　　左边我设置了一个宽度，右边的列则使用了margin-left:200px ,这个外边距刚好是左边的宽度。希望对大家有帮助

3.两列固定，我们用一个外部容器保存

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列之固定布局</title>
</head>
<style>
  .wrapper{
  	width: 880px;
  	height: 300px;
  	margin:0 auto;
  }
  .left{
  	float: left;
  	width: 200px;
  	height: 300px;
  	background-color: #ccc;

  }
  .right{
  	float: right;
  	width: 680px;
  	height: 300px;
  	background-color: #198610;
  }
</style>
<body>
	<div class="wrapper">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	
</body>
</html>

转载于:https://www.cnblogs.com/kevinlifeng/p/5153081.html