css利用margin外部尺寸实现等高布局经典案例

我们可能会有一个这样的需求:

    两个板块并排排列,分别有内容,当任意一个内容增加总的高度也增加

如图所示:

我们正常的块状标签排列时候是这样的:

通过属性margin设置后:

下面直接上代码:

html部分:

<div class="wrap">
	<div class="left">
		<h1>内容1</h1>
		<h1>内容1</h1>
	</div>
	<div class="right">
		<h1>内容2</h1>
	</div>
</div>

css部分:

.wrap{
	overflow: hidden;
}
.left,.right{
	width:100px;
	background: orange;
	float: left;
	margin-bottom: -9999px;
	padding-bottom: 9999px;
}

原理就是通过margin-bottom向上9999px;然后再用padding-bottom向下9999px抵消,通过父标签设置overflow:hidden隐藏内容超出区域就能实现

注意:此方法适用于块状标签,行内标签可以设置display:block;变为块状标签

发布了30 篇原创文章 · 获赞 19 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览