CSS（八）三栏布局详解

电玩女神 2023-07-17 14:06 19阅读 0赞

三栏布局，顾名思义就是两边固定，中间自适应。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70][]

以下一些为公共代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <style>
    	.left {
    	     
    	}
    	.right {
    	     
    	}
    	.main {
        
    	}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="main"></div>
        </div>
    </body>
    </html>

**下面七种技巧各有千秋，在开发中可以根据实际需求选择适合自己的方法进行编码。**

## 1. 流体布局 ##

.left {
      float: left;
      height: 200px;
      width: 100px;
      background-color: yellowgreen;
    }
    
    .right {
      width: 200px;
      height: 200px;
      background-color: darkorange;
      float: right;
    }
    
    .main {
      margin-left: 120px;
      margin-right: 220px;
      height: 200px;
      background-color: cyan;
    }

左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。

缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。

## 2. BFC 三栏布局 ##

BFC 规则有这样的描述：**BFC 区域，不会与浮动元素重叠**。可以利用这一点来实现 3 列布局。

.left {
      float: left;
      height: 200px;
      width: 100px;
      margin-right: 20px;
      background-color: yellowgreen;
    }
    .right {
      width: 200px;
      height: 200px;
      float: right;
      margin-left: 20px;
      background-color: darkorange;
    }
    .main {
      height: 200px;
      overflow: hidden;
      background-color: cyan;
    }

缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。

## 3. 双飞翼布局 ##

这个布局的html和前面稍有不同

.content {
      float: left;
      width: 100%;
    }
    .main {
      height: 200px;
      margin-left: 110px;
      margin-right: 220px;
      background-color: yellowgreen;
    }
    .left {
      float: left;
      height: 200px;
      width: 100px;
      margin-left: -100%;
      background-color: cyan;
    }
    .right {
      width: 200px;
      height: 200px;
      float: right;
      margin-left: -200px;
      background-color: darkorange;
    }

利用的是浮动元素 margin 负值的应用，感兴趣的同学可以上网搜搜原理。

主体内容可以优先加载，HTML 代码结构稍微复杂点。

## 4. 圣杯布局 ##

.container {
      margin-left: 120px;
      margin-right: 220px;
    }
    .main {
      float: left;
      width: 100%;
      height: 300px;
      background-color: cyan;
    }
    .left {
      float: left;
      width: 100px;
      height: 300px;
      margin-left: -100%;
      position: relative;
      left: -120px;
      background-color: darkorange;
    }
    .right {
      float: left;
      width: 200px;
      height: 300px;
      margin-left: -200px;
      position: relative;
      right: -220px;
      background-color: yellowgreen;
    }

跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

## 5. Flex 布局 ##

.container {
      display: flex;
    }
    .main {
      flex-grow: 1;
      height: 300px;
      background-color: cyan;
    }
    .left {
      order: -1;
      flex: 0 1 200px; 
      margin-right: 20px;
      height: 300px;
      background-color: darkorange;
    }
    .right {
      flex: 0 1 100px;
      margin-left: 20px;
      height: 300px;
      background-color: yellowgreen;
    }

简单实用，未来的趋势，需要考虑浏览器的兼容性。

## 6. Table 布局 ##

.container {
      display: table;
      width: 100%;
    }
    .left, .main, .right {
      display: table-cell;
    }
    .left {
      width: 200px;
      height: 300px;
      background-color: darkorange;
    }
    .main {
      background-color: cyan;
    }
    .right {
      width: 100px;
      height: 300px;
      background-color: yellowgreen;
    }

缺点：无法设置栏间距

## 7. 绝对定位布局 ##

.container {
      position: relative;
    }
    .main {
      height: 400px;
      margin: 0 120px;
      background-color: yellowgreen;
    }
    .left {
      position: absolute;
      width: 100px;
      height: 300px;
      left: 0;
      top: 0;
      background-color: cyan;
    }
    .right {
      position: absolute;
      width: 100px;
      height: 300px;
      background-color: darkorange;
      right: 0;
      top: 0;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70]: /images/20230528/808df7c6f6f548aebe00ebfce4bfc5e4.png