两栏布局

最新推荐文章于 2025-02-04 20:13:59 发布

ECHO-Debug

最新推荐文章于 2025-02-04 20:13:59 发布

阅读量109

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44455764/article/details/109138764

版权

简单实用的两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>两栏布局</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;/*ul默认有padding-left:40px*/
		}
		.div1{
			width: 300px;
			height: 100px;
			background-color: black;
			color: white;
			float: left;/*左右浮动都可以*/
		}
		.div2{
			height: 200px;
			background-color: pink;
			overflow: hidden;/*div2变成BFC*/
		}
		.div3{
			width: 300px;
			height: 100px;
			background-color: orange;
			position: absolute;/*绝对定位*/
			top: 0px;
			right: 0px;
			
		}
		.div4{
			height: 200px;
			background-color: purple;
			margin-right: 300px;/*为div3留空间，避免视觉上重叠*/
		}
	</style>
</head>
<body>
	<div>
		<div class="div1">1号方块</div>
		<div class="div2">2号方块，可以根据1号方块的宽度自适应地调整自己的宽度，补全宽度</div>
	</div>
	<div style="position:relative">
		<div class="div3">3号方块，固定宽度</div>
		<div class="div4">4号方块，根据3号方块的宽度预留margin</div>
	</div>
</body>
</html>

效果如图：
两栏布局