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