实现一个三列布局，左边固定大小，其他两列占据剩余空间的50%

最新推荐文章于 2021-08-21 19:29:17 发布

baidu-liuming

最新推荐文章于 2021-08-21 19:29:17 发布

阅读量567

点赞数

CC 4.0 BY-SA版权

分类专栏： H5 文章标签： css3 float

本文链接：https://blog.youkuaiyun.com/fisherming/article/details/74643607

H5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS float属性实现特殊布局的方法。通过调整div元素的浮动和位置，可以创建一个左侧固定宽度并覆盖在中间和右侧元素之上的布局效果。这种布局方式适用于需要固定侧边栏的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运用float

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.middle-right-div {
			margin-left: 150px;
		}
		
		.div-middle {
			float: left;
			background-color: blue;
			width: 50%;
			height: 50px;
		}
		
		.div-right {
			float: left;
			background-color: yellow;
			width: 50%;
			height: 50px;
		}
		
		.div-left {
			float: left;
			background-color: red;
			width: 150px;
			margin-left: -100%;
			height: 50px;
		}
	</style>

	<body>
		<div class="middle-right-div">
			<div class="div-middle"><span>div-middle</span></div>
			<div class="div-right"><span>div-right</span></div>
		</div>
		<div class="div-left"><span>div-left</span></div>
	</body>

</html>

效果：