CSS兩列及三列自適應布局方法整理

jopen 8年前發布 | 24K 次閱讀 CSS 前端技術

在傳統方法的基礎上加入了Flex布局并闡述各方法的優缺點，希望對大家有所幫助。先上目錄：

</div>

  • 兩列布局：左側定寬，右側自適應

    • 方法一：利用float和負外邊距

    • 方法二：利用外邊距

    • 方法三：利用position

    • 方法四：利用flex布局
      • </ul> </li>

    • 三列布局：左右定款，中間自適應。

      • 方法一：使用負外邊距

      • 方法二：使用絕對定位

      • 方法三：使用flex布局
        • </ul> </li> </ul>

        兩列布局：左側定寬，右側自適應

        方法一：利用float和負外邊距

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main,.sitebar{
            font: bolder 20px/300px;
        }
        .main{
            width: 100%;
            float: left;
        }
        .main .content{
            margin-left: 200px;
            background-color: red;
        }
        .sitebar{
            width: 200px;
            float: left;
            background-color: green;
            margin-left: -100%;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="content">右側主體自適應區塊</div>
    </div>
    <div class="sitebar">左側定寬200px區塊</div>
</body>
</html>

        • 優點：考慮了頁面優化，右側主內容區先加載，左側后加載。

          </li>

        • 缺點：多添加了一層div包裹。

          </li> </ul>

          方法二：利用外邊距

          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .sitebar{
            float: left;
            width: 200px;
            background-color: green;
        }
        .content{
            background-color: red;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="sitebar">左側定寬200px區塊</div>
    <div class="content">右側主體自適應區塊</div>
</body>
</html>

          • 優點：代碼簡潔，便于理解

            </li>

          • 缺點：不利于頁面優化，右側主內容區后加載

            </li> </ul>

            方法三：利用position

            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .sitebar{
            width: 200px;
            background-color: green;
        }
        .content{
            position: absolute;
            left: 200px;
            right: 0;
            top: 0;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="content">右側主體自適應區塊</div>
    <div class="sitebar">左側定寬200px區塊</div>
</body>
</html>

            • 優點：考慮到了頁面優化，右側內容區先加載

              </li>

            • 缺點：暫時沒想到。。

              </li> </ul>

              上述三種方法兼容 IE7 以上，但在IE7下不設置高度時，會產生高度錯位bug。可通過設置父元素 font-size=0 ，再分別設置 子元素 font-size解決。

              方法四：利用flex布局

              <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            display: flex;
        }
        .content{
            flex:1;
            background-color: red;
        }
        .sitebar{
            flex:0 0 200px;
            order:-1;
            background-color: green;
        }
              


              </style>

              

              </head>
<body>
<div class="main">
    <div class="content">右側主體自適應區塊</div>
    <div class="sitebar">左側定寬200px區塊</div>
</div>
    </body>
</html></pre> 
                

              • 

                優點：CSS3新布局方式，高大上
                
</li>
                

              • 

                缺點：僅支持 IE11+ 。 
                
</li>
</ul>
                

                三列布局：左右定款，中間自適應。
                

                方法一：使用負外邊距
                

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main,.left,.right{
            height: 300px;
            font: 20px/300px;
            color: #fff;
            text-align: center;
        }
        .main{
            width: 100%;
            float: left;
        }
        .main .content{
            margin: 0 300px 0 200px;
            background-color: black;
        }
        .left{
            width: 200px;
            float: left;
            margin-left: -100%;
            background-color: red;
        }
        .right{
            width: 300px;
            float: left;
            margin-left: -300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="content">中間主體區域寬度自適應</div>
    </div>
    <div class="left">左側定寬200px</div>
    <div class="right">右側定寬300px</div>
</body>
</html>
                 
                  

                • 

                  優點：兼容IE7+，考慮到頁面優化，中間內容區先加載
                  
</li>
                  

                • 

                  缺點：多一層div嵌套，不易理解
                  
</li>
</ul>
                  

                  方法二：使用絕對定位
                  

                  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
body{
    margin:0px;
}
                  

                  left {
                  


                  background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
left: 0px;

                  

                  }
                  

                  center {
                  


                  background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 102px;
margin-left: 102px;

                  

                  }
                  

                  right {
                  


                  background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
right: 0px;

                  

                  }
</style>
</head>
                  

                  <body>
    <div id="center">中列</div>
    <div id="left">左列</div>
    <div id="right">右列</div>
</body>
</html></pre> 
                    

                  • 

                    優點：代碼結構簡單，考慮到了頁面優化，中間內容去先加載
                    
</li>
                    

                  • 

                    缺點：暫時沒想到。。
                    
</li>
</ul>
                    

                    方法三：使用flex布局
                    

                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style> .HolyGrail-body {
  display: flex;
  flex: 1;
}
.HolyGrail-content {
  flex: 1;
  background-color: green;
}
                    

                    .HolyGrail-nav, .HolyGrail-ads {
  / 兩個邊欄的寬度設為12em /
  flex: 0 0 200px;
  background-color: blue;
}
                    

                    .HolyGrail-nav {
  / 導航放到最左邊 /
  order: -1;
  background-color: grey;
}
</style>
</head>
<body>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
</body>
</html></pre>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

相關經驗

相關資訊

相關文檔