DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 利用margin實現等高布局
利用margin實現等高布局
編輯:CSS詳解     
代碼如下:
<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 做到了等高布局。只是一個看起來的。實際上高度不相等的。只是隱藏了超出的部分
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved