自适应的多栏布局

最新推荐文章于 2024-08-09 16:21:47 发布

qq_36499016

最新推荐文章于 2024-08-09 16:21:47 发布

阅读量322

点赞数

分类专栏： HTML 文章标签： BFC 自适应

本文链接：https://blog.csdn.net/qq_36499016/article/details/96899278

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:80%;
				margin:0 auto;
				background: #f0f;
			}
			.left{
				width:200px;
				height: 500px;
				background: #f00;
				float:left;
			}
			.main{
				width:auto;
				height:600px;
				background: #00f;
				overflow: auto;
				margin-left:50px;
			}
			.right{
				width:100px;
				height: 400px;
				background: #ff0;
				float:right;
			}
		</style>
	</head>
	<body>
		<!--
			1、默认块元素的宽高解析规则（宽度：父元素，高：内容的高度）
			2、块元素设置了脱离文档流的浮动和定位的属性后，宽度是内容的宽度
			3、BFC的区域不会与浮动的元素重叠
		-->
		<div class="box">
			<div class="left">

			</div>
			<div class="right"></div>
			<div class="main">sdfsfsdfsd</div>
			
		</div>
		
	</body>
</html>