雙飛翼布局

msup 發(fā)布于2019-04-22 19:50 / 1232人閱讀

摘要：雙飛翼三個(gè)高度均為，兩個(gè)寬度均為，或者你們隨意設(shè)置能越過，跑到最左邊負(fù)的自己的寬度，這里是左右值為和寬度，因?yàn)槭潜缓蜕w住了，所以里面的內(nèi)容區(qū)域，要設(shè)置值，跑到能看見的地方

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雙飛翼title>
head>
<style>
    *{
        margin: 0;
    }
    html, body {
        height: 100%;
    }
    /* 三個(gè)高度均為100%， float： left */
    .main_container, .left, .right{
        height: 100%; 
        float: left;
    }
    /* 兩個(gè)寬度均為200px，或者你們隨意設(shè)置 */
    .left, .right{
        width: 200px;
    }

    .left{
        background: palegreen;
        margin-left: -100%;  /* 能越過main，跑到最左邊 */
    }

    .right{
        background: palevioletred;
        margin-left: -200px; /* 負(fù)的自己的寬度，這里是200px */
    }

    .main_container{
        background: plum;
        width: 100%;
    }

    .main_container .main{ /* margin 左右值為left和right寬度， 因?yàn)?main_container是被left和right蓋住了，所以里面的內(nèi)容區(qū)域，要設(shè)置margin值，跑到能看見的地方 */
        margin: 0 200px;
    }
style>
<body>
    <div class="main_container">
        <div class="main">mainmainmainmainmainmainmainmainmainmaidiv>
    div>
    <div class="left">leftleftleftleftdiv>
    <div class="right">rightrightrightrightrightdiv>
body>
html>

GPU云服務(wù)器云服務(wù)器雙飛翼布局雙飛翼雙飛 div布局布局html

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/968.html

相關(guān)文章

圣杯布局和雙飛翼布局

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

yankeys 2019-08-29 13:54 評論0 收藏0
淺談面試中常考的兩種經(jīng)典布局——圣杯與雙飛翼

摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機(jī)會(huì)總結(jié)一波，同時(shí)加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個(gè)問題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置參考圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結(jié)過...

SwordFly 2019-08-30 13:58 評論0 收藏0
淺談面試中?？嫉膬煞N經(jīng)典布局——圣杯與雙飛翼

摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機(jī)會(huì)總結(jié)一波，同時(shí)加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個(gè)問題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置參考圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結(jié)過...

劉厚水 2019-08-01 18:35 評論0 收藏0
聊聊為什么淘寶要提出「雙飛翼」布局

摘要：于是，淘寶軟對針對圣杯的缺點(diǎn)做了優(yōu)化，并提出雙飛翼布局。綜合來看，不管的大小高低如何，雙飛翼布局都能正常顯示，嗯確實(shí)很優(yōu)秀。錘子和釘子綜上所見，雙飛翼布局更勝一籌。 showImg(https://segmentfault.com/img/bVYtjF?w=922&h=561); 前言突然有一天，腦之里不知怎地蹦出一個(gè)詞，「雙飛翼」，這是很久以前的淘寶提出的一種三欄布局優(yōu)化方案，然而...

junbaor 2019-08-29 13:47 評論0 收藏0
圣杯布局和雙飛翼布局的理解與思考

摘要：圣杯布局和雙飛翼布局的理解與思考圣杯布局和雙飛翼布局都是前端工程師需要日常掌握的重要布局方式。注代碼中，部分首先要放在最前面部分，然后是，以便先行渲染結(jié)構(gòu)首先定義出整個(gè)布局的結(jié)構(gòu)，主題部分是由包裹的，三列，其中定義在最前面。圣杯布局和雙飛翼布局的理解與思考圣杯布局和雙飛翼布局都是前端工程師需要日常掌握的重要布局方式。按照我的理解，其實(shí)圣杯布局和雙飛翼布局的實(shí)現(xiàn)，目的都是在于兩欄固定...

王偉廷 2019-08-02 16:16 評論0 收藏0
圣杯布局和雙飛翼布局的理解與思考

摘要：圣杯布局和雙飛翼布局的理解與思考圣杯布局和雙飛翼布局都是前端工程師需要日常掌握的重要布局方式。注代碼中，部分首先要放在最前面部分，然后是，以便先行渲染結(jié)構(gòu)首先定義出整個(gè)布局的結(jié)構(gòu)，主題部分是由包裹的，三列，其中定義在最前面。圣杯布局和雙飛翼布局的理解與思考圣杯布局和雙飛翼布局都是前端工程師需要日常掌握的重要布局方式。按照我的理解，其實(shí)圣杯布局和雙飛翼布局的實(shí)現(xiàn)，目的都是在于兩欄固定...

qpwoeiru96 2019-08-30 10:49 評論0 收藏0