建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要講解了“怎么用DIV浮動(dòng)定位實(shí)現(xiàn)CSS分欄布局”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用DIV浮動(dòng)定位實(shí)現(xiàn)CSS分欄布局”吧！
創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括莘縣網(wǎng)站建設(shè)、莘縣網(wǎng)站制作、莘縣網(wǎng)頁制作以及莘縣網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，莘縣網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到莘縣省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
CSS分欄布局
CSS布局中實(shí)現(xiàn)分欄布局有兩種方法。***種方法是使用四種CSS定位選項(xiàng)（absolute、static、relative和fixed）中的DIV絕對定位（absolutepositioning），它可以將文檔中的某個(gè)元素從其原本位置上移除，并重新定位在期望的任何地點(diǎn)之上。第二種則是使用CSS中的DIV浮動(dòng)定位（float）概念。DIV絕對定位或DIV浮動(dòng)定位都能夠用來實(shí)現(xiàn)分欄效果。二者可以獨(dú)立使用，也可以結(jié)合在一起，相輔相成。
DIV浮動(dòng)定位
DIV浮動(dòng)定位的本意是要將插入到文章中的圖片向左或者向右浮動(dòng)，使圖片下方的文字自動(dòng)環(huán)繞在它的周圍，使圖片的左邊或者右邊不會(huì)出現(xiàn)一大塊的留白。DIV浮動(dòng)定位的語法雖然簡單，但卻不那么容易掌握，下面讓我們舉例說明如何用浮動(dòng)來進(jìn)行布局。同樣，我們要實(shí)現(xiàn)一個(gè)帶頁腳的三欄布局。如下圖：
如何用DIV浮動(dòng)定位實(shí)現(xiàn)這樣的效果呢？
其實(shí)很簡單：
1、設(shè)定E的寬度，讓E居中
2、設(shè)定A、B、C的寬度，將A、B、C分別向左浮動(dòng)
3、給頁腳設(shè)置clear屬性
需要說明的是，浮動(dòng)布局依然遵循常規(guī)文檔流，所以與絕對定位相比，DIV浮動(dòng)定位時(shí)HTML源文件中元素聲明的位置顯得格外重要。當(dāng)然，解決這個(gè)問題的最簡單的方法就是在源文件中交換左欄和右欄的聲明次序，也有方法不用交換各欄的次序也可以實(shí)現(xiàn)同樣的布局，但是，這就要用到一種比較晦澀的使用負(fù)邊距值的方法。一般情況下，人們十有八九會(huì)選擇交換源文件中左中兩欄的聲明次序。
感謝各位的閱讀，以上就是“怎么用DIV浮動(dòng)定位實(shí)現(xiàn)CSS分欄布局”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用DIV浮動(dòng)定位實(shí)現(xiàn)CSS分欄布局這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
網(wǎng)站名稱：怎么用DIV浮動(dòng)定位實(shí)現(xiàn)CSS分欄布局
瀏覽路徑：http://ef60e0e.cn/article/joesig.html
