运用margin完成等高合理布局

2021-01-20 08:58 jianzhan

拷贝编码
编码以下:

<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:⑴000px;
padding-bottom:1000px;
}
</style>


拷贝编码
编码以下:

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

十分恰当的运用了 margin 保证了等高合理布局。只是1个看起来的。具体上高宽比不相同的。只是掩藏了超过的一部分