圣杯布局 vs 雙飛翼布局

microelec 發布于2019-08-29 13:51 / 1992人閱讀

摘要：圣杯布局實現原理代碼中，部分首先要放在的最前部分，然后是，將三者都設置因為相對定位后面會用到設置占滿一行此時占滿一行，所以要把拉到所在行的最左邊，使用這時拉回到所在行的最左邊，但會覆蓋內容的左端，要把內容拉出來，所以在外圍加上內容拉出來

圣杯布局 實現原理

html代碼中，middle部分首先要放在container的最前部分，然后是left，right

將三者都設置 float:left, position:relative (因為相對定位后面會用到）

middle設置 width:100% 占滿一行

此時middle占滿一行，所以要把left拉到middle所在行的最左邊，使用 margin-left:-100%

這時left拉回到middle所在行的最左邊，但會覆蓋middle內容的左端，要把middle內容拉出來，所以在外圍container加上 padding:0 210px

middle內容拉出來了，但left也跟著出來了，所以要還原，就對left使用相對定位 left:-210px

同理，right要拉到middle所在行的最右邊，使用 margin-left:-210px，right:-210px

實現代碼

雙飛翼布局 實現原理

html代碼中，middle部分首先要放在container的最前部分，然后是left，right

將三者都設置 float:left

middle設置 width:100% 占滿一行

此時middle占滿一行，所以要把left拉到middle所在行的最左邊，使用 margin-left:-100%，同理right使用 margin-left:-200px

此時middle的內容被覆蓋，要把middle的內容拉出來，除了使用外圍container的padding，還可以考慮使用margin，給middle增加一個內層div -- middle_content, 然后設置 margin:0 210px

實現代碼




    
    雙飛翼布局
    


    
        頭部
        
            
                
                    middle_content
主內容區域
                
            
            
                left
左側邊欄區域
            
            
                right
右側邊欄區域
            
        
        底部

GPU云服務器云服務器圣杯布局雙飛翼布局 div布局布局html 排版布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112750.html

圣杯布局 vs 雙飛翼布局

摘要：圣杯布局實現原理代碼中，部分首先要放在的最前部分，然后是，將三者都設置因為相對定位后面會用到設置占滿一行此時占滿一行，所以要把拉到所在行的最左邊，使用這時拉回到所在行的最左邊，但會覆蓋內容的左端，要把內容拉出來，所以在外圍加上內容拉出來圣杯布局實現原理 html代碼中，middle部分首先要放在container的最前部分，然后是left，right 將三者都設置 float:l...

alin 2019-08-01 18:02 評論0 收藏0
那些年，奇妙的圣杯與雙飛翼，還有負邊距

摘要：奇妙的圣杯與雙飛翼相信很多人和我在學習前端差不多的時候就聽說過了圣杯布局與雙飛翼布局。他往前移動之后，文檔流也會跟著移動元素寬度負邊距負邊距可以增加元素的寬度，對于沒有的元素，負邊距可以加寬他們。 [TOC] 沒錯，題目就是模仿《那些年，我們一起清除過的浮動》而來的。奇妙的圣杯與雙飛翼相信很多人和我在學習前端差不多的時候就聽說過了圣杯布局與雙飛翼布局。關于取名無非是覺得長得像圣杯，...

tianhang 2019-08-30 12:50 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。圣杯布局圣杯布局dom結構：圣杯布局 ...

yankeys 2019-08-29 13:54 評論0 收藏0
兩招搞定三欄布局——圣杯布局、雙飛翼布局

摘要：如何實現如下的這種中間自適應寬度，左右兩欄固定寬度布局這是一道經典的面試題，常用的方法是圣杯布局雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。在雙飛翼中避免左右盒子被覆蓋，是通過設置的左右來實現的。如何實現如下的這種中間自適應寬度，左右兩欄固定寬度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

Kaede 2019-08-29 16:19 評論0 收藏0
CSS布局--圣杯布局和雙飛翼布局以及使用Flex實現圣杯布局

摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實解決的問題是相同的，都是解決左右兩欄固定寬度，中間部分自適應，其中某部分內容比其他內容高的時候，保證三者元素等高。雙飛翼用在外層多加了一個然后改用。前言我曾一度覺得總寫css的前端很low，有了這種思想以后我便遠離網頁布局，H5的工作更不想接，沉迷于頁面邏輯和封裝組件。直到最近我面試，面試官說我css3理解的不熟，我起初很不屑，但后來靜...

zqhxuyuan 2019-08-30 14:11 評論0 收藏0