双飞翼布局

最新推荐文章于 2022-09-26 01:25:24 发布

时光无声￡

最新推荐文章于 2022-09-26 01:25:24 发布

阅读量77

点赞数

分类专栏： CSS 文章标签：双飞翼布局

本文链接：https://blog.csdn.net/weixin_44586981/article/details/119235036

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				overflow: hidden;
			}
			#wrap .middle,#wrap .left,#wrap .right{
				float: left;
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
			#wrap .middle{
				width: 100%;
				background-color: red;
			}
			#wrap .middle .m-inner{
				margin: 0 200px;
			}
			#wrap .left{
				width: 200px;
				background-color: pink;
				margin-left: -100%;
			}
			#wrap .right{
				width: 200px;
				background-color: pink;
				margin-left: -200px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="middle">
				<div class="m-inner">
					middle <br>
					middle <br>
					middle <br>
					middle <br>
					middle <br>
					middle <br>
				</div>
			</div>
			<div class="left">
				left
			</div>
			<div class="right">
				right
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

时光无声￡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双飞翼布局

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ overflow: hidden; } #wrap .middle,#wrap .left,#wrap
复制链接

扫一扫

专栏目录