IT貓撲網(wǎng)：您身邊最放心的安全下載站！ 最新更新|軟件分類|軟件專題|手機(jī)版|論壇轉(zhuǎn)貼|軟件發(fā)布

您當(dāng)前所在位置：首頁(yè) → 網(wǎng)絡(luò)編程 → DIVCSS → CSS三欄布局中最先顯示中欄的方法

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

時(shí)間：2015/6/28來(lái)源：IT貓撲網(wǎng)作者：網(wǎng)管聯(lián)盟我要評(píng)論(0)

　　瀏覽器顯示頁(yè)面是一行一行的按順序執(zhí)行代碼，也就是說(shuō)寫(xiě)在前面的先執(zhí)行顯示，而對(duì)于左中右3欄布局的設(shè)計(jì)，代碼要么是從左-->中-->右來(lái)書(shū)寫(xiě)，要么就是到過(guò)來(lái)從右-->中-->左來(lái)書(shū)寫(xiě)，要做到要求的效果，那首先要書(shū)寫(xiě)的是中欄的代碼。

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

　　

以下為引用的內(nèi)容：
<script language="javascript"> var l=document.getElementById("left").scrollHeightvar m=document.getElementById("middle").scrollHeightvar r=document.getElementById("right").scrollHeightlayoutHeight=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>

關(guān)鍵詞標(biāo)簽：方法,顯示,最先,布局,

相關(guān)閱讀

文章評(píng)論
發(fā)表評(píng)論

熱門文章 DIV+CSS網(wǎng)頁(yè)布局常用的一些基礎(chǔ)知識(shí)整理DIV+CSS網(wǎng)頁(yè)布局常用的一些基礎(chǔ)知識(shí)整理

相關(guān)下載

人氣排行 DIV CSS完美兼容IE6/IE7/FF的通用方法CSS實(shí)例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實(shí)例CSS實(shí)例:通過(guò)定義漸變邊框給圖片加陰影CSS常用技巧之一 禁止文字自動(dòng)換行網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中CSS十大注意解決用CSS控制DIV居中失效的問(wèn)題css div設(shè)置float后高度不能自動(dòng)增加讓CSS兼容IE和Firefox的技巧集合