新聞中心
這篇文章主要介紹CSS中經(jīng)典三欄布局方案的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
專業(yè)從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計(jì),微信小程序開發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù),采用H5高端網(wǎng)站建設(shè)+CSS3前端渲染技術(shù),成都響應(yīng)式網(wǎng)站建設(shè),讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項(xiàng)小組,與您實(shí)時(shí)在線互動(dòng),隨時(shí)提供解決方案,暢聊想法和感受。
1. float布局
最簡(jiǎn)單的三欄布局就是利用float進(jìn)行布局。首先來繪制左、右欄:
此時(shí)可以得到左右兩欄分布:
接下來再來看中間欄如何處理。我們知道對(duì)于float元素,其會(huì)脫離文檔流,其他盒子也會(huì)無(wú)視這個(gè)元素。(但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置,環(huán)繞在周圍。)所以此時(shí)只需在container容器內(nèi)添加一個(gè)正常的div,其會(huì)無(wú)視left和right,撐滿整個(gè)container,只需再加上margin為left right流出空間即可:
此時(shí)看到的效果是:左、右兩欄被擠到第二行。這是因?yàn)閙ain的寬度為100%。接下來我們通過調(diào)整左、右兩欄的margin來將左、中、右放在一行中:
.left { float: left; width: 100px; height: 200px; margin-left: -100%; background-color: red; } .right { float: left; width: 100px; height: 200px; margin-left: -100px; background-color: yellow; }
第二步,將left的margin-left設(shè)置為-100%,此時(shí)左欄會(huì)移動(dòng)到第一行的首部。然后再將right的margin-left設(shè)置為其寬度的負(fù)值:-100px,則右欄也會(huì)移動(dòng)到和左、中欄一行中:
不過此時(shí)還沒有大功告成,我們?cè)囍趍ain中加入一些文字:
fjlskdjflkasjdfljasdljlsjdljsdjflksadj