聖盃佈局和雙飛翼佈局的做用和區別

時間 2019-11-09

標籤佈局雙飛區別简体版

原文原文鏈接

聖盃佈局和雙飛翼佈局解決的問題是同樣的，就是兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。

聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄所有float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以造成三欄佈局。

不一樣在於解決」中間欄div內容不被遮擋「問題的思路不同：
聖盃佈局，爲了中間div內容不被遮擋，將中間div設置了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div。

雙飛翼佈局，爲了中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該子div裏用margin-left和margin-right爲左右兩欄div留出位置。
多了1個div，少用大體4個css屬性（聖盃佈局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼佈局子div裏用margin-left和margin-right共2個屬性，6-2=4），我的感受比聖盃佈局思路更直接和簡潔一點。

簡單提及來就是」雙飛翼佈局比聖盃佈局多建立了一個div，但不用相對佈局了「，而不是你題目中說的」去掉relative"就是雙飛翼佈局「。

最終界面是同樣的：

對比圖：

下面直接上代碼：css

聖盃佈局：html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>聖盃佈局</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .bd{
        /*左右欄經過添加負的margin放到正確的位置了，此段代碼是爲了擺正中間欄的位置*/
        padding:0 200px 0 180px;
        height:100px;
    }
    .middle{
        float:left;
        width:100%;/*左欄上去到第一行*/
        height:100px;
        background:blue;
    }
    .left{
        float:left;
        width:180px;
        height:100px;
        margin-left:-100%;
        background:#0c9;
        /*中間欄的位置擺正以後，左欄的位置也相應右移，經過相對定位的left恢復到正確位置*/
        position:relative;
        left:-180px;
    }
    .right{
        float:left;
        width:200px;
        height:100px;
        margin-left:-200px;
        background:#0c9;
        /*中間欄的位置擺正以後，右欄的位置也相應左移，經過相對定位的right恢復到正確位置*/
        position:relative;
        right:-200px;
    }
  </style>
</head>
<body>
<div class="bd">
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

雙飛翼佈局：css3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>雙飛翼佈局</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .middle{
        float:left;
        width:100%;/*左欄上去到第一行*/     
        height:100px;
        background:blue;
    }
    .left{
        float:left;
        width:180px;
        height:100px;
        margin-left:-100%;
        background:#0c9;
    }
    .right{
        float:left;
        width:200px;
        height:100px;
        margin-left:-200px;
        background:#0c9;
    }
    /*給內部div添加margin，把內容放到中間欄，其實整個背景仍是100%*/ 
    .middle .inside{
        margin:0 200px 0 180px;
        height:100px;
    }
  </style>
</head>
<body>
  <div class="middle">
    <div class="inside">middle</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</body>
</html>

<body>
<style type="text/css">
    body{margin:0; padding:0;}
    .boxA{width:180px;background: #CD0000 }
    .boxB{width:600px;background: #9ACD32}
    .boxC{width:180px;background: #87CEFF}
    .box{ height: 300px; float: left;}

    /*ABC*/
    /*.boxA{position: relative;left:-960px;}
    .boxB{margin-left:180px;}*/
    
    /*CBA*/
    .container{ padding: 0 180px;}
    .boxB{width: 100%; text-align: right;}
    .boxC{position: relative;margin-left: -180px;left:-100%;}
    .boxA{position: relative;margin-left: -180px;right:-180px;}

    /*BAC*/
    /*.boxC{float:right;}
    .container{width: 960px;}*/
</style>
<p>現有並列的三列布局結構，從左至右依次爲 A, B, C, 寬度分別爲180px, 600px, 180px。要求在不改變 Html 結構的狀況下用CSS實現：ABC，CBA，BAC 三種佈局及在CBA排列下使B寬度自適應（三列總寬度100%），不能使用針對瀏覽器的CSS Hack.</p>
<div class="container">
    <div class="box boxB">B</div>
    <div class="box boxC">C</div>
    <div class="box boxA">A</div>
</div>
</body>

源碼地址：https://github.com/zuobaiquan/css3/tree/master/%E5%B8%83%E5%B1%80%E6%96%B9%E5%BC%8Fgit

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。