慕课笔记利用css进行布局【两列布局】

最新推荐文章于 2021-03-22 21:35:12 发布

weixin_30474613

最新推荐文章于 2021-03-22 21:35:12 发布

阅读量74

点赞数

原文链接：http://www.cnblogs.com/soulsjie/p/7255672.html

版权

<html>
	<head>
		<title>两列布局</title>
		<style type="text/css">
			body{margin:0;padding:0;text-align:center}
			/*两列的布局样式*/
				/*float:left向左浮动*/
			.content{width:920px;margin:0 auto}
			.left{width:20%;height:500px;background:#f00;float:left}
			.right{width:80%;height:500px;background:#ff0;float:right}
		</style>
	</head>
	<body>

	 
	 <!--/*两列的布局样式*/-->
	 两列的布局样式，采用浮动的方式<br/>
	 <div class="content">
	 <div class="left"></div>
	 <div class="right"></div>
	 </div>

	</body>
</html>

效果图如下：