關於雙飛翼佈局的新的布法

時間 2019-11-17

標籤關於雙飛佈局新的简体版

原文原文鏈接

以前看了雙飛翼佈局，沒有理解他的意思，只知道要實現的效果是兩邊固定，中間能夠縮放！但中間的內容不能被兩邊遮擋！！！html

而後百度來的代碼是這樣的：ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        body{
            color: green;
            font-size: 40px;
        }
        #bd {       
          padding: 0 230px 0 190px;  
      }
        .main {       
           float: left;      
           width: 100%;  
           background:#39c;
           height:300px;
       } 
     .sub {      
           float: left;       
           width: 190px;       
           margin-left: -100%;  
           background:#f60;
           height:300px;
           position:relative;
           left:-190px;
      }  
      .extra {       
             float: left;       
             width: 230px;       
             margin-left: -230px;
             background:#666;
             height:300px;
             position:relative;
             right:-230px;
      } 

    </style>
</head>
<body>
    <section id="bd">
        <div class="main">我是主體內容</div>
        <aside class="sub">我是左邊</aside>
        <aside class="extra">我是右邊</aside>
    </section>
</body>
</html>

效果圖以下：佈局

看了幾遍樣式，沒理解透，原諒我這麼低的智商！！！！spa

而後本身折騰了一個方法：3d

代碼以下：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        body{
            font-size: 50px;
            padding-left: 160px;
            padding-right: 160px;
        }
        header{
            height: 80px;
            width: 100%;
            background-color:pink;
            position: fixed;
            top:0px;
            left:0px;
        }
        .leftPart{
            width: 160px;
            height: 100%;
            position: fixed;
            top:80px;
            left:0px;
            background-color: red;
        }
        .rightPart{
            width: 160px;
            position: fixed;
            right:0px;
            top:80px;
            height: 100%;
            background-color: red;
        }
        .content{
            margin-top: 80px;
        }
    </style>
</head>
<body>
   <header>我是頭部</header>
   <section>
        <div class="content">
            <h1>啦啦啦拉拉阿拉拉阿拉啦我是右邊阿拉拉阿拉啦我是右邊阿拉拉阿拉啦我是右邊阿拉拉阿拉啦我是右邊阿拉拉阿拉啦我是右邊阿拉拉阿拉啦我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            <h1>我是中間</h1>
            
        </div>
        <div class="leftPart">
            我是左邊
        </div>
        <div class="rightPart">
            我是左邊
        </div>
        
   </section>
    
</body>
</html>

效果以下圖:htm

具體的思想是左右兩邊固定定位，中間的部分不用管它，由於他們的父親body設置了左右padding！blog

以上僅僅是我的理解，有什麼錯誤的地方請你們多多指教！！不勝感激！！！！it

相關標籤/搜索

每日一句

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