html两列布局

最新推荐文章于 2023-02-02 19:09:05 发布

weixin_33756418

最新推荐文章于 2023-02-02 19:09:05 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/liusonghuang/blog/806088

2019独角兽企业重金招聘Python工程师标准>>>

1.html两列布局：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列布局</title>
	<style type="text/css">
		body{margin: 0;padding: 0;}
		.main{width: 800px;height: 500px;margin: 0 auto;}
		.left{width: 20%;background-color: #ccc;height: 500px;float: left;}
		.right{width: 80%;background-color: #666666;height: 500px;float: right;}
	</style>
</head>
<body>
<div class="main">
	<div class="left">1</div>
	<div class="right">1</div>
</div>
	
</body>
</html>

2.效果图：

3.html两列布局2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{margin: 0;padding: 0;}
		.left{width: 20%;background-color: #ccc;height: 500px;float: left;}
		.right{width: 80%;background-color: #666666;height: 500px;float: right;}
	</style>
</head>
<body>
	<div class="left">1</div>
	<div class="right">1</div>
</body>
</html>

效果：

转载于:https://my.oschina.net/liusonghuang/blog/806088