前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >margin 等高布局

margin 等高布局

作者头像
全栈程序员站长
发布2022-07-07 18:12:37
4880
发布2022-07-07 18:12:37
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是全栈君。

代码语言:javascript
复制
<div id="main">
	<div id="left">
		我是左边的内容的啦啦啦啦。。。。<br>		我是左边的内容的啦啦啦啦。。。。<br>		我是左边的内容的啦啦啦啦。。。。<br>		我是左边的内容的啦啦啦啦。。。。<br>		我是左边的内容的啦啦啦啦。。。。<br>	</div>	<div id="right">		左边的内容...哈哈哈哈哈	</div></div><style>#main{	overflow:hidden;	width:500px;	margin:0 auto;}#left{	float:left;	width:390px;	background:#eee;}#right{	float:right;	width:100px;	background:#ccc;}#left,#right{	margin-bottom:-1000px;	padding-bottom:1000px;}</style>
代码语言:javascript
复制
overflow:hidden;
代码语言:javascript
复制
margin-bottom:-1000px;
padding-bottom:1000px;

很巧妙的利用了 margin 做到了等高布局。。仅仅是一个看起来的。实际上高度不相等的。

仅仅是隐藏了超出的部分

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/116434.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年1月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档