阿里團隊常用的布局——雙飛翼布局

GeekGhc 發布于2019-04-23 11:58 / 2905人閱讀

摘要：雙飛翼布局新手來說不太好理解，光靠死記不行，理解了以后就能輕易寫出來。獻上代碼雙飛翼雙飛翼布局的好處是淘寶團隊提出一種優化寫法，寫在前面，優先加載，優先渲染，而且兼容性好。

雙飛翼布局新手來說不太好理解，光靠死記不行，理解了以后就能輕易寫出來。獻上代碼：

<head>
    <meta charset="UTF-8">
    <title>雙飛翼title>
    <style>
        .wrap {
            width: 90%;
            margin: 0 auto;
        }

        .left {
            width: 200px;
            height: 700px;
            background: red;
            float: left;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            height: 700px;
            background: red;
            float: right;
            margin-left: -200px;
        }

        .main {
            width: 100%;
            float: left;
            background: pink;
        }

        .content {
            height: 700px;
            background: yellow;
            margin: 0 210px;
        }
    style>
head>
<body>
<div class="wrap">
    <div class="main">
        <div class="content">contentdiv>
    div>
    <div class="left">leftdiv>
    <div class="right">rightdiv>
div>
body>

雙飛翼布局的好處：是淘寶團隊提出一種優化寫法，main寫在前面，優先加載，優先渲染，而且兼容性好。

理解雙飛翼布局的幾個關鍵點：

①main是自適應寬度的，所以width:100%;

②main、left、right都是float:left;，但是main的寬度是100%，所以left、right被擠到第二行；

③如何讓left和right移動到正確的位置呢？

理解時應該考慮浮動的特性，假設main是固定寬度的，全都左浮動以后，main、left、right應該排在同一行。

那么要讓left移動到左邊就容易了，只需要向左邊移動一個main的寬度就可以了，所以就是margin-left:-100%;

因為main的寬度是100%，要讓right移動到右邊，則只需要給right一個200的寬度，讓它移動上去就行了，所以就是margin-left:-200px;

④此時，left和right實際上是疊在main的左右兩邊的，這就是在寫結構時，要在main里面多寫一層content的原因，只要給content一個margin:0 210px;里面的內容就不會被left和right擋住，雙飛翼布局也就實現了。

GPU云服務器云服務器雙飛翼布局 android常用布局 html的布局布局遇到的問題

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

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

CSS常用布局

摘要：頭部主要內容左邊欄右邊欄尾部顯示為頭部主要內容左邊欄右邊欄尾部圣杯布局和雙飛翼布局的原理這篇文章講解得比較清楚，我就不再贅述。 ====== 樣例代碼不能顯示，請看原文https://magicly.me/css-layout/ ====== 布局是CSS中一個很重要的部分，甚至我覺得是最重要也是最難的部分，其他諸如字體大小、顏色等等都是很容易的。最近總結一下使用過的CSS常...

aaron 2019-08-29 12:59 評論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

includecmath 2019-08-29 12:17 評論0 收藏0
CSS中的負邊距

摘要：之后仔細的百度了一下，發現了這么一個叫做內外補丁負值法的東西。在這個解決方案中，又涉及到了傳說中的負。深入研究之后又發現了圣杯布局雙飛翼布局等很多示例，確實要好好研究負邊距這個東西了。相關推薦那些年，奇妙的圣杯與雙飛翼，還有負邊距 2015-04-22 時候寫的老文，因為希望引用所以拿了出來。那天被一個同學問了一個問題，三列的div，要求父div的高度和三個div的高度都和三個中字數...

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

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

Kaede 2019-08-29 16:19 評論0 收藏0
【布局】圣杯布局&雙飛翼布局

摘要：差別通俗點講就是圣杯布局像是，杯子掛上兩只耳朵，，所有容量都給了杯身，耳朵只能掛在兩側。雙飛翼布局像是，鳥的雙翼，，身子是鳥的一大部分，雙翼也是身體的一部分。其他布局其他布局方案已經整理到此文中，歡迎大家前往指正整理布局方案背景隨著前端技術的發展推進，web端的布局方式已基本成熟，那么在網站布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的代碼...

LeviDing 2019-08-01 17:36 評論0 收藏0