聖盃佈局

實現原理

html程式碼中，middle部分首先要放在container的最前部分，然後是left，right

1. 將三者都設定 float:left, position:relative (因為相對定位後面會用到）

2. middle設定 width:100% 佔滿一行

3. 此時middle佔滿一行，所以要把left拉到middle所在行的最左邊，使用 margin-left:-100%

4. 這時left拉回到middle所在行的最左邊，但會覆蓋middle內容的左端，要把middle內容拉出來，所以在外圍container加上 padding:0 210px

5. middle內容拉出來了，但left也跟著出來了，所以要還原，就對left使用相對定位 left:-210px

6. 同理，right要拉到middle所在行的最右邊，使用 margin-left:-210px，right:-210px

實現程式碼

<
!DOCTYPE HTML>
<
html lang="en-US">
<
head>
    <
meta charset="UTF-8">
    <
title>
聖盃佈局<
/title>
    <
style type="text/css">
        body { 
           text-align: center;
;
        
  }        #demo { 
           margin: auto;
        
  }        #header, #footer { 
           height: 50px;
            background-color: #aaa;
        
  }        #container { 
           overflow: hidden;
            margin: 10px 0;
            padding:0 210px;
        
  }        #left { 
           background-color: red;
            float:left;
            position:relative;
            left:-210px;
            width:200px;
            margin-left:-100%;
        
  }        #right { 
           background-color: green;
            width: 200px;
            margin-left: -200px;
            float: left;
            right: -210px;
            position: relative;
        
  }        #middle { 
           background-color: blue;
            float:left;
            width:100%;
        
  }    <
/style>
<
/head>
<
body>
    <
div id="demo">
        <
header id="header">
頭部<
/header>
        <
div id="container">
            <
div id="middle">
                middle<
br>
主內容區域            <
/div>
            <
div id="left">
                left<
br>
左側邊欄區域            <
/div>
            <
div id="right">
                right<
br>
右側邊欄區域            <
/div>
        <
/div>
        <
footer id="footer">
底部<
/footer>
    <
/div>
<
/body>
<
/html>
複製程式碼

雙飛翼佈局

實現原理

html程式碼中，middle部分首先要放在container的最前部分，然後是left，right

1. 將三者都設定 float:left

2. middle設定 width:100% 佔滿一行

3. 此時middle佔滿一行，所以要把left拉到middle所在行的最左邊，使用 margin-left:-100%，同理right使用 margin-left:-200px

4. 此時middle的內容被覆蓋，要把middle的內容拉出來，除了使用外圍container的padding，還可以考慮使用margin，給middle增加一個內層div — middle_content, 然後設定 margin:0 210px

實現程式碼

<
!DOCTYPE HTML>
<
html lang="en-US">
<
head>
    <
meta charset="UTF-8">
    <
title>
雙飛翼佈局<
/title>
    <
style type="text/css">
        body { 
           text-align: center;
;
        
  }        #header, #footer { 
           height: 50px;
            background-color: #aaa;
        
  }        #container { 
           overflow: hidden;
            margin: 10px 0;
        
  }        #left { 
           background-color: red;
            float:left;
            width:200px;
            margin-left: -100%;
        
  }        #right { 
           background-color: green;
            width: 200px;
            float: left;
            margin-left: -200px;
        
  }        #middle { 
           float: left;
            width: 100%;
        
  }        #middle_content { 
           background-color: blue;
            margin: 0 210px;
        
  }    <
/style>
<
/head>
<
body>
    <
div id="demo">
        <
header id="header">
頭部<
/header>
        <
div id="container">
            <
div id="middle">
                <
div id="middle_content">
                    middle_content<
br>
主內容區域                <
/div>
            <
/div>
            <
div id="left">
                left<
br>
左側邊欄區域            <
/div>
            <
div id="right">
                right<
br>
右側邊欄區域            <
/div>
        <
/div>
        <
footer id="footer">
底部<
/footer>
    <
/div>
<
/body>
<
/html>
複製程式碼

---

轉載請註明出處，謝謝！

來源：https://juejin.im/post/5be252be518825170e4a979e