資訊專欄INFORMATION COLUMN
布局思路：
外面一個(gè)大div,里面三個(gè)小div(都是浮動(dòng))。實(shí)現(xiàn)左右兩欄寬度固定，中間寬度自適應(yīng)。中間欄優(yōu)先渲染。
?
?
1.基本布局
?
?外面一個(gè)大div，里面三個(gè)小div。注意中間欄寫在前面，優(yōu)先渲染。
?
?
2.外面大div設(shè)置左右padding值，分別是左右兩欄的寬度(兩欄之間若有空隙可適當(dāng)增加margin值)。中間的width讓Main全部充滿。由于Main占據(jù)整個(gè)父元素width，Left和Right則被擠到下一行顯示(注意此時(shí)Left和Main是對(duì)齊的)。
CSS如下：
?
效果如下：
?
?
?
3.將左右兩欄移至上一行，此時(shí)要用到margin-left的負(fù)值效果。
代碼如下：
?此時(shí)Left和Right分別移到了Main的首尾位置。(此時(shí)的字母Main已看不見)
?
效果如下：
?
?
4.由于此時(shí)的Left和Right都遮擋住了部分Main，所以還需要做調(diào)整。用position:relative來進(jìn)行微調(diào)。
代碼如下：
也可以用負(fù)值：
#left {position:relative;left:-200px;}
#right {position:relative;right:-200px;}
?
效果如下：
?
此時(shí)圣杯布局完成。
?
資料參考：https://blog.csdn.net/yinmazuo/article/details/50218657
? ? ? ? ? ?http://cnodejs.org/topic/56d70d5f4dfa4031185aabbf
?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2283.html
摘要：解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。 解決的問題 圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。 圣杯布局 圣杯布局dom結(jié)構(gòu)： 圣杯布局 ...
摘要：圣杯布局與雙飛翼的比較項(xiàng)目實(shí)驗(yàn)在對(duì)百分比布局和圣杯布局有了一定了解以后，我呢寫了一個(gè)將這兩個(gè)聯(lián)系在一起，沒有，只有。 最近在開發(fā)一個(gè)簡單的頁面的時(shí)候，需要給頁面去做一個(gè)布局，具體部分就是頭部header和內(nèi)容區(qū)域。這里有一個(gè)要求就是頭部定好寬度以后，需要讓container占有整個(gè)屏幕，那最好的辦法就是直接計(jì)算頁面的高度，然后減去header的高度，即可得到container的高度?？?..
摘要：圣杯布局與雙飛翼的比較項(xiàng)目實(shí)驗(yàn)在對(duì)百分比布局和圣杯布局有了一定了解以后，我呢寫了一個(gè)將這兩個(gè)聯(lián)系在一起，沒有，只有。 最近在開發(fā)一個(gè)簡單的頁面的時(shí)候，需要給頁面去做一個(gè)布局，具體部分就是頭部header和內(nèi)容區(qū)域。這里有一個(gè)要求就是頭部定好寬度以后，需要讓container占有整個(gè)屏幕，那最好的辦法就是直接計(jì)算頁面的高度，然后減去header的高度，即可得到container的高度。可...
摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實(shí)解決的問題是相同的，都是解決左右兩欄固定寬度，中間部分自適應(yīng)，其中某部分內(nèi)容比其他內(nèi)容高的時(shí)候，保證三者元素等高。雙飛翼用在外層多加了一個(gè)然后改用。 前言 我曾一度覺得總寫css的前端很low，有了這種思想以后我便遠(yuǎn)離網(wǎng)頁布局，H5的工作更不想接，沉迷于頁面邏輯和封裝組件。直到最近我面試，面試官說我css3理解的不熟，我起初很不屑，但后來靜...
閱讀 2638·2023-04-25 18:13
閱讀 870·2021-11-22 12:10
閱讀 3050·2021-11-22 11:57
閱讀 2203·2021-11-19 11:26
閱讀 2234·2021-09-22 15:40
閱讀 1523·2021-09-03 10:28
閱讀 2758·2019-08-30 15:53
閱讀 2012·2019-08-30 15:44
