瀏覽器顯示頁面是一行一行的按順序執(zhí)行代碼，也就是說寫在前面的先執(zhí)行顯示，而對于左中右3欄布局的設計，代碼要么是從左-->中-->右來書寫，要么就是到過來從右-->中-->左來書寫，要做到要求的效果，那首先要書寫的是中欄的代碼。
所以我首先定義了一個id=m的DIV，并且padding-left:150px，定義這個是為了給左欄留出140PX的顯示位置，然后再在這個DIV里面嵌套定義一個id=middle的DIV，我用position:absolute的屬性(絕對定位);然后再定義左欄left和右欄right。用position:absolute的屬性有一個不好的地方就是它象photoshop里的層一樣，它的自動延伸并不會帶動整個布局的延伸，所以會遮住一些頁面元素，比如我們通常會在網(wǎng)站的最下面寫上一些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>
|
