如何利用margin实现等高布局

本篇内容介绍了“如何利用margin实现等高布局”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

代码如下:

<div id="main">
<div id="left">
我是左边的内容的啦啦啦啦。。。。

我是左边的内容的啦啦啦啦。。。。

我是左边的内容的啦啦啦啦。。。。

我是左边的内容的啦啦啦啦。。。。

我是左边的内容的啦啦啦啦。。。。

</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>

代码如下:

overflow:hidden;
margin-bottom:-1000px;
padding-bottom:1000px;

非常巧妙的利用了 margin 做到了等高布局。只是一个看起来的。实际上高度不相等的。只是隐藏了超出的部分

“如何利用margin实现等高布局”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！