資訊專欄INFORMATION COLUMN
摘要：張?chǎng)涡窭蠋煹牟┛褪亲筮吜魇讲季?，右邊固定寬度左浮?dòng)因?yàn)楦?dòng)會(huì)導(dǎo)致元素脫離文檔流，所以下面的元素會(huì)占據(jù)浮動(dòng)元素原來的位置。代碼左浮動(dòng)實(shí)現(xiàn)兩列布局絕對(duì)定位實(shí)現(xiàn)兩列布局這個(gè)原理類似浮動(dòng)，因?yàn)榻^對(duì)定位會(huì)脫離文檔流，只需要設(shè)置右的就能實(shí)現(xiàn)布局。
因?yàn)樽罱难獊沓?，就總結(jié)了一下css中的幾種常見的多列布局。
兩列自適應(yīng)布局
兩列自適應(yīng)布局算是css布局里面最基礎(chǔ)的一種布局了，不少網(wǎng)站在使用。
這種布局通常是左側(cè)固定，右邊自適應(yīng)，當(dāng)然也有反過來的，道理一樣，這里有好幾種方法。
(張?chǎng)涡窭蠋煹牟┛褪亲筮吜魇讲季?，右邊固定寬度?
左浮動(dòng)+margin
因?yàn)楦?dòng)會(huì)導(dǎo)致元素脫離文檔流，所以下面的元素會(huì)占據(jù)浮動(dòng)元素原來的位置。 這個(gè)時(shí)候只要對(duì)右邊元素設(shè)置margin-left:左邊div寬度 就可以實(shí)現(xiàn)自適應(yīng)布局。
代碼:左浮動(dòng)實(shí)現(xiàn)兩列布局
絕對(duì)定位實(shí)現(xiàn)兩列布局
這個(gè)原理類似浮動(dòng)，因?yàn)榻^對(duì)定位會(huì)脫離文檔流，只需要設(shè)置右div的margin-left就能實(shí)現(xiàn)布局。
代碼:絕對(duì)定位實(shí)現(xiàn)兩列布局
flex實(shí)現(xiàn)兩列布局
flex布局一直挺好用，無奈兼容性捉急，ie10+才支持。 注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。 flex布局默認(rèn)項(xiàng)目是主軸為水平方向，最主要的是flex屬性。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。 大概就是給左邊的div一個(gè)固定值，然后給右邊設(shè)置flex:auto;來實(shí)現(xiàn)兩列布局。 這里不多對(duì)flex布局介紹，有興趣的可以看一下
阮一峰老師的這篇博客:flex布局
這里是代碼鏈接:flex布局實(shí)現(xiàn)兩列布局
calc實(shí)現(xiàn)兩列布局
這是css3里面的新屬性，兼容性還可以，在ie9+、FF4.0+、Chrome19+、Safari6+都得到了支持。 通過calc可以使用百分比、em、px和rem單位值計(jì)算出其寬度或者高度，這樣就不用考慮div值到底是多少。所以可以對(duì)右邊div設(shè)置width:calc(100%-100px);來實(shí)現(xiàn)自適應(yīng)布局。
代碼鏈接:calc實(shí)現(xiàn)兩列布局
浮動(dòng)+margin負(fù)值來實(shí)現(xiàn)
這是之前寫ife任務(wù)的時(shí)候在一篇博客上看到的。 實(shí)現(xiàn)方法是給右邊的div外面再套上一個(gè)父div，然后讓父div的寬度設(shè)為100%。 對(duì)父div和左邊的div都設(shè)置左浮動(dòng)，再讓左div的margin-left:-100%,右div設(shè)置margin-left:左div的寬度。 這樣就實(shí)現(xiàn)了自適應(yīng)布局，當(dāng)然左右div的前后順序要反過來。
具體看代碼:margin負(fù)值實(shí)現(xiàn)自適應(yīng)
三列自適應(yīng)布局
除了常見的兩列布局，我們也經(jīng)常能夠見到三列布局，左右固定，中間自適應(yīng)。
（這里只是拿這張圖舉個(gè)例子，w3school官網(wǎng)是三列固定布局）
浮動(dòng)實(shí)現(xiàn)三列布局
這個(gè)類似兩列布局的浮動(dòng)，對(duì)左右div分別設(shè)置左右浮動(dòng)，中間div設(shè)置margin-left和margin-right來實(shí)現(xiàn)，當(dāng)然在html中的順序應(yīng)該是左右中。
代碼鏈接：浮動(dòng)實(shí)現(xiàn)三列布局
margin負(fù)值實(shí)現(xiàn)三列布局
原理同margin負(fù)值實(shí)現(xiàn)兩列布局，不多說了。
直接上代碼:margin負(fù)值實(shí)現(xiàn)三列布局
flex實(shí)現(xiàn)三列布局
和flex兩列布局一個(gè)原理，對(duì)兩邊設(shè)置flex:0 0 100px,中間設(shè)置flex:auto。
代碼代碼：flex實(shí)現(xiàn)三列布局
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111357.html
摘要：張?chǎng)涡窭蠋煹牟┛褪亲筮吜魇讲季?，右邊固定寬度左浮?dòng)因?yàn)楦?dòng)會(huì)導(dǎo)致元素脫離文檔流，所以下面的元素會(huì)占據(jù)浮動(dòng)元素原來的位置。代碼左浮動(dòng)實(shí)現(xiàn)兩列布局絕對(duì)定位實(shí)現(xiàn)兩列布局這個(gè)原理類似浮動(dòng)，因?yàn)榻^對(duì)定位會(huì)脫離文檔流，只需要設(shè)置右的就能實(shí)現(xiàn)布局。 因?yàn)樽罱难獊沓?，就總結(jié)了一下css中的幾種常見的多列布局。 兩列自適應(yīng)布局 兩列自適應(yīng)布局算是css布局里面最基礎(chǔ)的一種布局了，不少網(wǎng)站在使用。 這...
摘要：前言居中布局，是前端頁面最常見的一種布局需求。下面將現(xiàn)今自己了解的居中布局方法作個(gè)小總結(jié)。水平居中行內(nèi)元素在包含的父元素定義屬性為。垂直水平居中對(duì)于這個(gè)問題，可以綜合上述點(diǎn)進(jìn)行實(shí)現(xiàn)。 前言 居中布局，是前端頁面最常見的一種布局需求。剛開始學(xué)習(xí)前端時(shí)還是困擾了一段時(shí)間，后來看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現(xiàn)今自己了解的居...
摘要：雖然今年沒有換工作的打算但為了跟上時(shí)代的腳步還是忍不住整理了一份最新前端知識(shí)點(diǎn)知識(shí)點(diǎn)匯總新特性，語義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式和的區(qū)別使用的好處標(biāo)簽廢棄的標(biāo)簽，和一些定位寫法放置位置和原因什么是漸進(jìn)式渲染模板語言原理盒模型，新特性，偽 雖然今年沒有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總1.HTMLHTML5新特性，語義化瀏覽器的標(biāo)準(zhǔn)模式和怪...
摘要：雖然今年沒有換工作的打算但為了跟上時(shí)代的腳步還是忍不住整理了一份最新前端知識(shí)點(diǎn)知識(shí)點(diǎn)匯總新特性，語義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式和的區(qū)別使用的好處標(biāo)簽廢棄的標(biāo)簽，和一些定位寫法放置位置和原因什么是漸進(jìn)式渲染模板語言原理盒模型，新特性，偽 雖然今年沒有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總1.HTMLHTML5新特性，語義化瀏覽器的標(biāo)準(zhǔn)模式和怪...
摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總 1.HTML HTML5新特性，語義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標(biāo)簽canvasHTML廢棄的標(biāo)簽IE6 bug，和一些定位寫法css js放置位置和原因...
閱讀 2224·2021-09-09 09:33
閱讀 1168·2019-08-30 15:43
閱讀 2737·2019-08-30 13:45
閱讀 3362·2019-08-29 11:00
閱讀 996·2019-08-26 14:01
閱讀 3636·2019-08-26 13:24
閱讀 549·2019-08-26 11:56
閱讀 2759·2019-08-26 10:27
