等高布局就是伪等高布局

最新推荐文章于 2020-05-26 16:32:45 发布

无悟饭空

最新推荐文章于 2020-05-26 16:32:45 发布

阅读量143

点赞数

分类专栏： # 布局 html和css

本文链接：https://blog.csdn.net/weixin_43269800/article/details/103872655

版权

html和css 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

布局

9 篇文章 0 订阅

订阅专栏

实现原理：
1、用padding-bottom把两个元素撑开；
2、用margin-bottom把两个元素的下边界收回原来的位置。
3、父元素用overflow：hidden；把超出部分隐藏。

<body>
	<div id="wrap" class="clearfix">
		<div class="left">
			left
		</div>
		<div class="right">
       right <br>
       right <br>
		</div>
	</div>
</body>

*{
	margin: 0;
	padding: 0;
}
#wrap{
	width: 700px;
	border: 1px solid;
	margin: 0 auto;
	overflow: hidden;
}
#wrap .left{
	float: left;
	width: 200px;
	background: pink;
	padding-bottom: 1000px;
	margin-bottom: -1000px;
}
#wrap .right{
	float: left;
	width: 500px;
	background: deeppink;
	padding-bottom: 1000px;
	margin-bottom: -1000px;
}
.clearfix{
	*zoom: 1;
}
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

无悟饭空

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
等高布局就是伪等高布局

实现原理：1、用padding-bottom把两个元素撑开；2、用margin-bottom把两个元素的下边界收回原来的位置。3、父元素用overflow：hidden；把超出部分隐藏。<body> <div id="wrap" class="clearfix"> <div class="left"> left </div>...
复制链接

扫一扫