2. 程式人生 > >聖盃+雙飛翼 自適應佈局

聖盃+雙飛翼 自適應佈局

阿新 • • 發佈：2018-11-18

一、聖盃佈局

左右固定200px，中間自適應

  • 左右兩個div左右浮動，中間div寫到前面
  • 通過margin-left：-100%；來調整到同一行
  • 父容器新增左右padding，左右div相對定位

詳細程式碼如下：


<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>聖盃佈局</title>
        <style>        
*{
    margin:0;
}
html{
    height:100%;
}
.box{
    width:800px;
    height:300px;
    border:1px solid black;
    margin:0 auto;
    background:#0ff;
    padding:0px 200px;
}
.left{
    width:200px;
    height:300px;
    background:#f00;
    float:left;
    margin-left:-100%;
    position:relative;
    left:-200px;
}
.center{
    width:100%;
    height:300px;
    background:#0f0;
    float:left;    
}
.right{
    width:200px;
    height:300px;
    background:blue;
    float:right;    
    margin-left:-100%;
    position:relative;
    right:-200px;    
}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="center"></div>
            <div class="left"></div>            
            <div class="right"></div>
        </div>
    </body>
</html>

執行結果如下圖：

二、雙飛翼佈局

左右固定200px，中間自適應

  • 左右兩個div左右浮動，中間div寫到前面
  • 通過margin-left：-100%；來調整到同一行
  • 中間div新增一個子節點div，設定margin調整位置

具體程式碼如下：


<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>雙飛翼佈局</title>
        <style>
        *{
    margin:0;
}
html{
    height:100%;
}
.box{
    width:1000px;
    height:300px;
    border:1px solid black;
    margin:0 auto;
    background:#0ff;    
}
.left{
    width:200px;
    height:300px;
    background:#f00;
    float:left;
    margin-left:-100%;    
}
.center{
    width:100%;
    height:300px;
    background:#0f0;
    float:left;    
}
.right{
    width:200px;
    height:300px;
    background:blue;
    float:right;    
    margin-left:-100%;    
}
.conter{
    margin:0 200px;
}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="center">
                <div class="conter">
                    雙飛翼佈局
                </div>
            </div>
            <div class="left"></div>            
            <div class="right"></div>
        </div>    
    </body>
</html>

執行結果如下圖：

加關注 持續更新

原文地址：https://segmentfault.com/a/1190000015634014

相關推薦

聖盃+雙飛翼 自適應佈局

一、聖盃佈局 左右固定200px，中間自適應 左右兩個div左右浮動，中間div寫到前面 通過margin-left：-100%；來調整到同一行 父容器新增左右padding，左右div相對定位 詳細程式碼如下： <!doctype html> &

經典三欄佈局之聖盃、雙飛翼、彈性佈局

經典三欄佈局之聖盃、雙飛翼、彈性佈局 聖盃佈局和雙飛翼佈局是前端工程師需要掌握的佈局方式，兩者功能相同，都是為了實現兩側寬度固定，中間寬度自適應的佈局方式，此外，使用新增的flex佈局，可以使佈局更加簡單。 雙飛翼佈局和聖盃佈局雖然實現方式有所差異，但是基本上都遵循了以下幾點： 兩側寬度固定，中間寬度自適

CSS | 聖盃佈局、雙飛翼佈局 | 自適應三欄佈局

聖盃佈局和雙飛翼佈局是前端工程師需要日常掌握的重要佈局方式。兩者的功能相同，都是為了實現一個兩側寬度固定，中間寬度自適應的三欄佈局 雖然兩者的實現方法略有差異，不過都遵循了以下要點： 1.兩側寬度固定，中間寬度自適應 2.中間部分在DOM結構上優先，以便先行渲染 3.允許三列中的任意一列成為最高列 4.只需

響應式布局之浮動聖杯布局（雙飛翼布局）—-自適應寬度布局

由於 部分 gin asi 禁用 代碼 寬度 sof cin 前端開發中自適應布局在實際應用中越來越普遍，特別是隨著更多高級瀏覽器的出現html5和css3得到了更好的應用。 聖杯布局有個好處，完全符合前端開發中漸進增強的理念，由於瀏覽器解析是從DOM的上至下，這樣聖杯布局

使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局

head -h color ima details blue lex http eight 使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局 實現三欄水平布局，其中left、right分別位於左右兩側，left寬度為200px，right寬度為300px，main

佈局：聖盃佈局和雙飛翼佈局

聖盃佈局和雙飛翼佈局都是為了實現兩邊固定，中間自適應的三列的佈局，他的中間欄優先渲染。 聖盃佈局與雙飛翼佈局前面幾步相同 1.寫三個div，中間的那個div放在第一個//優先渲染 2.給左中右設定浮動，分別設定高度，寬度，顏色 3.左邊模組讓它margin-left:-100%,右邊模組ma

佈局——聖盃和雙飛翼佈局

css可以繼承的屬性有哪些？ Font 系列 text系列 color line-height border-radius的值的問題 四個值的順序是 左上 右上 右下 左下。 white-space 規定段落中的文字換不換行 往往值是nowrap 不換行 Word-wrap 屬性允許長的內容可以自

圖解聖盃佈局與雙飛翼佈局--CSS佈局實戰一

本質：均是兩側頂寬（寬度固定），中間自適應 適用：電商網頁pc移動端展示，比如淘寶、京東等電商網頁都有應用。 區別：只是中間自適應的處理方式不同。 聖盃佈局： 中間主要是直接撐滿，然後讓左右通過相對絕對定位（position）來浮動。 雙飛翼佈局：中間同樣充滿，在中間再放一層內部

聖盃佈局和雙飛翼佈局的理解和區別

連結 聖盃佈局和雙飛翼佈局基本上是一致的，都是兩邊固定寬度，中間自適應的三欄佈局，其中，中間欄放到文件流前面，保證先行渲染。解決方案大體相同，都是三欄全部float:left浮動，區別在於解決中間欄div的內容不被遮擋上，聖盃佈局是中間欄在新增相對定位，並配合left和right屬性，效

Css有關於聖盃及雙飛翼佈局

css中的負邊距(negative margin)是佈局中的一個常用技巧，只要運用得合理常常會有意想不到的效果。 說道margin負值問題就不得不說一下前端頁面常見的佈局：聖盃和雙飛翼佈局。其實這兩種佈局在實際應用上是一樣的東西，不同的是概念不一樣。使用的就是

聖盃佈局、雙飛翼佈局、Flex佈局和絕對定位佈局的幾種經典佈局的具體實現示例

題目要求：針對如下DOM結構，編寫CSS，實現三欄水平佈局，其中left、right分別位於左右兩側，left寬度為200px，right寬度為300px，main處在中間，寬度自適應。 要求：允許增加額外的DOM節點，但不能修改現有節點順序。 <

CSS佈局 -- 聖盃佈局 & 雙飛翼佈局

按照我的理解，其實聖盃佈局跟雙飛翼佈局的實現，目的都是左右兩欄固定寬度，中間部分自適應。 但在這裡實現起來還是有一些區別的 【聖盃佈局】 在這裡，實現了左(200px) 右(220px) 寬度固定，中間自適應，container部分高度保持一致。 DEMO 稍微說明一下： html程式碼中

經典佈局之聖盃佈局&雙飛翼佈局

前言 所謂經典，說白了就是古老的東西，但是又是很有用的東西。大多數前端頁面仔包括本菜（不！我可是勵志成為前端工程師的男人，頁面仔太刺耳）都或多或少了解的聖盃佈局和雙飛翼佈局。 本文只對這兩種佈局進行簡單的探討(畢竟本菜真的好菜啊) 不管怎樣，寫作的好處自然

關於聖盃佈局和雙飛翼佈局

聖盃佈局和雙飛翼佈局講的都是三欄佈局，其中兩欄固定，中間自適應，兩者顯示的效果是一致的；另外由於沒有使用絕對定位position:absolute，所以可以避免發生當頁面內容比較多的時候用絕對定位導致

css佈局：雙飛翼佈局與聖盃佈局

今天開班級會議，主要是講講畢業的事宜，其中一位同學說到他現在在專研一些新技術，但是我不建議他這麼做，畢竟基礎很重要程式設計主要學習的是思想 正題吧，前陣子朋友面試，有這麼一個要求： 就是兩邊定寬，中間自適應的三欄佈局 是不是感覺很簡單，但是我事後試了試，發現不是那麼簡單，

css3聖盃和雙飛翼佈局

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text

經典的三欄佈局：聖盃佈局，雙飛翼佈局，flex佈局

需求： 兩邊欄固定寬度，中間寬度自適應，一般左邊欄為導航，右邊欄為廣告，中間欄為主要內容的展示，div塊上中間欄放在第一位，重要的東西放在文件流前面可以優先渲染。 聖盃佈局和雙飛翼佈局的共同特點都是利用float+margin的負值來實現並列的結

CSS 聖盃佈局 雙飛翼佈局

目的：載入文件時先載入中間區域，再載入左右兩邊。 特點：中間的內容可以根據螢幕的大小的改變而改變,左右兩邊的內容保持不變。 實現： 1.0在一個大的div中放入三個小的div，並且排序一定要是中間的div放在文件的最前面。 2.0給大的div設定左右padding,給中間的div設定寬度為100%; 3.0

聖盃佈局和雙飛翼佈局

聖盃佈局 聖盃佈局就是三欄佈局，其中左右兩欄固定寬度，中間部分自適應 主要步驟： 在html中，中間的塊在最前面，後面緊跟左邊的塊和右邊的塊 三者均設定float:left，中間塊設定width

CSS雙飛翼佈局和聖盃佈局margin-left:-100%;等內容理解

網上搜索雙飛翼佈局和聖盃佈局都會有許多不錯的文章，在這裡給大家推薦一篇部落格 看完之後，我來補充一點細節的東西！！！ 如何理解margin-left:-100%及margin-left:300px； 看完這個圖解，上面的問題就應該沒問題了！！具體的雙飛翼佈局方法請參