HTML+CSS实现两栏布局

最新推荐文章于 2024-06-13 17:29:52 发布

原创

最新推荐文章于 2024-06-13 17:29:52 发布 · 714 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #flex #html5 #css3

本文详细介绍了使用float+margin、BFC、table布局、flex布局和grid布局五种方法来实现HTML和CSS的两栏布局，涵盖了从传统到现代的多种布局策略。

HTML+CSS两栏布局实现

1.利用float+margin实现
2.利用BFC实现
3.利用table布局
4.利用flex布局
5.利用grid布局

1.利用float+margin实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.left1 {
    
    
			height: 300px;
			background-color: red;
			width: 400px;
			float: left;
		}

		.right1 {
    
    
			width: 400px;
			height: 300px;
			background-color: green;
			margin-left: 400px;
		}
	</style>
</head>
<body>
	<div class="left1"></div>
	<div class="right1"></div>
</body>
</html>