| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS三欄布局中最先顯示中欄的方法

來源:互聯網  2008-08-05 07:04:41  評論

浏覽器顯示頁面是一行一行的按順序執行代碼,也就是說寫在前面的先執行顯示,而對于左中右3欄布局的設計,代碼要麽是從左-->中-->右來書寫,要麽就是到過來從右-->中-->左來書寫,要做到要求的效果,那首先要書寫的是中欄的代碼。

所以我首先定義了一個id=m的DIV,並且padding-left:150px,定義這個是爲了給左欄留出140PX的顯示位置,然後再在這個DIV裏面嵌套定義一個id=middle的DIV,我用position:absolute的屬性(絕對定位);然後再定義左欄left和右欄right。用position:absolute的屬性有一個不好的地方就是它象photoshop裏的層一樣,它的自動延伸並不會帶動整個布局的延伸,所以會遮住一些頁面元素,比如我們通常會在網站的最下面寫上一些copyright的信息,如果用先顯示中欄的這種方法,如果不做處理的話,這些信息會被遮蓋住。處理的辦法就是使用javascript,讓左右2欄的高度隨中欄一起自動延伸。

<script language="javascript">

var l=document.getElementById("left").scrollHeight

var m=document.getElementById("middle").scrollHeight

var r=document.getElementById("right").scrollHeight

layoutHeight=Math.max(l,m,r)

document.getElementById("left").style.height=layoutHeight+"px"

document.getElementById("right").style.height=layoutHeight+"px"

document.getElementById("middle").style.height=layoutHeight+"px"

</script>

浏覽器顯示頁面是一行一行的按順序執行代碼,也就是說寫在前面的先執行顯示,而對于左中右3欄布局的設計,代碼要麽是從左-->中-->右來書寫,要麽就是到過來從右-->中-->左來書寫,要做到要求的效果,那首先要書寫的是中欄的代碼。 所以我首先定義了一個id=m的DIV,並且padding-left:150px,定義這個是爲了給左欄留出140PX的顯示位置,然後再在這個DIV裏面嵌套定義一個id=middle的DIV,我用position:absolute的屬性(絕對定位);然後再定義左欄left和右欄right。用position:absolute的屬性有一個不好的地方就是它象photoshop裏的層一樣,它的自動延伸並不會帶動整個布局的延伸,所以會遮住一些頁面元素,比如我們通常會在網站的最下面寫上一些copyright的信息,如果用先顯示中欄的這種方法,如果不做處理的話,這些信息會被遮蓋住。處理的辦法就是使用javascript,讓左右2欄的高度隨中欄一起自動延伸。 <script language="javascript"> var l=document.getElementById("left").scrollHeight var m=document.getElementById("middle").scrollHeight var r=document.getElementById("right").scrollHeight layoutHeight=Math.max(l,m,r) document.getElementById("left").style.height=layoutHeight+"px" document.getElementById("right").style.height=layoutHeight+"px" document.getElementById("middle").style.height=layoutHeight+"px" </script>
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有