CSS布局——两栏布局和三栏布局

女爷i 2022-10-16 08:54 153阅读 0赞

在网站中，两栏布局和三栏布局是常见的网页布局方式，这篇文章将总结常见的两栏布局和三栏布局方案都有哪些。

### 一、两栏布局 ###

以下的两栏布局方式属于左边宽度固定，右边宽度自适应的情形。  
**方案一：float+margin**  
1、首先准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏；  
2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移；  
3、为防止右元素被左元素挡住，需要给右元素加外边距。  
这是最简单的一种布局方案。  
html结构：

css样式：

.left{ 
      float: left;
      width: 150px;
      height: 200px;
      background-color: teal;
    }
    .right{ 
      margin-left: 160px;
      background-color: tomato;
      height: 200px;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70]**方案二：float+BFC**  
1、首先准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏；  
2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移；  
3、为防止右元素被左元素挡住，需要给右元素外加一个父元素，并触发该父容器的BFC。  
代码如下：  
html结构：

css样式：

.left{ 
      width: 150px;
      height: 200px;
      background-color:wheat;
      float: left;
    }
    .container{ 
      /* 触发BFC，防止右边的块元素被左边的挡到 */
      overflow: hidden;
    }
    .right{ 
      height: 300px;
      background-color: violet;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 1]**方案三：定位+margin**  
思路：将父元素设置为相对定位，左元素设置为绝对定位，右元素设置margin-left值。  
html结构：

css样式：

.box{ 
      position: relative;
    }
    .left{ 
      position: absolute;
      left: 0;
      width: 150px;
      height: 200px;
      background-color: burlywood;
    }
    .right{ 
      margin-left: 160px;
      height: 200px;
      background-color: cadetblue;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 2]**方案四：flex**  
思路：父元素设置`display: flex`，右元素设置`flex: 1`  
html结构：

css样式：

.box{ 
      display: flex;
    }
    .left{ 
      width: 150px;
      height: 200px;
      background-color: darkgray;
    }
    .right{ 
      flex: 1;
      height: 300px;
      background-color: darkolivegreen;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 3]**方案五：float+margin负值**  
这种方式有点繁琐，但也不失为一种实现方案。  
思路：  
1、将左元素设置左浮动，将右元素也设置左浮动，且宽度设置为100%；  
2、由于右元素宽度太大被挤下来，这时将左元素设置`margin-right: -100%`，父元素就可以往上移动；  
3、给右元素的子元素设置背景和`margin-left`  
html结构：

css样式：

.left{ 
      float: left;
      width: 150px;
      height: 200px;
      background-color: darkolivegreen;
      margin-right: -100%;
    }
    .right{ 
      float: left;
      width: 100%;
    }
    .right .content{ 
      background-color: darksalmon;
      margin-left: 160px;
      height: 200px;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 4]

### 二、三栏布局 ###

三栏布局一般是左右两栏固定宽度，中间栏宽度自适应。  
**方案一：float+margin**  
1、左元素设置左浮动，右元素设置右浮动；  
2、中间元素设置`margin-left`和`margin-right`。  
html结构：

css布局：

.left{ 
      float: left;
      width: 150px;
      height: 200px;
      background-color: lightcoral;
    }
    .right{ 
      float: right;
      width: 150px;
      height: 200px;
      background-color: lightseagreen;
    }
    .center{ 
      height: 200px;
      background-color: mediumpurple;
      margin: 0 160px;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 5]这种方式有一个缺点：通常来说，中间部分存放着网页中最重要的内容，中间部分被放到最下面。  
**方案二：flex**  
思路：  
1、将父元素设置`display: flex`；  
2、中间元素设置`flex: 1`；  
html结构：

css样式：

.container{ 
      display: flex;
    }
    .left{ 
      width: 150px;
      height: 200px;
      background-color: mediumpurple;
    }
    .center{ 
      flex: 1;
      height: 200px;
      background-color: plum;
    }
    .right{ 
      width: 150px;
      height: 200px;
      background-color: mediumpurple;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 6]下面实现两种经典的三栏布局——圣杯布局和双飞翼布局

#### 圣杯布局 ####

思路：  
1、左中右三个元素分别左浮动；  
2、中间元素设置`width：100%`；  
3、左元素设置`margin-left: -100%`，右元素设置右外边距为自身宽度的负值；  
4、父元素设置padding值，为左右两个元素留出空间；  
5、设置左右元素为相对定位，左元素的left和右元素的right为内边距的宽度的负值。  
html结构：

css样式：

.box{ 
      overflow: hidden;
      padding: 0 200px;
    }
    .center{ 
      float: left;
      width: 100%;
      height: 300px;
      background-color: blueviolet;
    }
    .left{ 
      float: left;
      width: 200px;
      height: 300px;
      background-color: cadetblue;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right{ 
      float: left;
      width: 200px;
      height: 300px;
      background-color: burlywood;
      margin-left: -200px;
      position: relative;
      right: -200px;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 7]

#### 双飞翼布局 ####

思路：  
1、左中右三个元素分别左浮动；  
2、中间元素设置`width: 100%`；  
3、左元素设置`margin-left: -100%`，右元素设置右外边距为自身宽度的负值；  
4、设置中间元素的子元素的外边距以展示中间内容。  
html结构：

css样式：

.box{ 
      overflow: hidden;
    }
    .middle{ 
      float: left;
      width: 100%;
    }
    .middle .content{ 
      background-color: darkkhaki;
      height: 200px;
      margin: 0 160px;
    }
    .left{ 
      float: left;
      width: 150px;
      height: 200px;
      background: darkgrey;
      margin-left: -100%;
    }
    .right{ 
      float: left;
      width: 150px;
      height: 200px;
      background: darkgrey;
      margin-left: -150px;
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70]: /images/20221014/379a1eb3062744158a702d02922b6d8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/72a4d81481af4e29949c67ff0979c106.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 2]: /images/20221014/d763a6f938304674a08a88f73743fe59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 3]: /images/20221014/b59b1f1a56ac4b83a791c82b4af50398.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 4]: /images/20221014/38f228a4d07d4e11add361afbdcde4a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 5]: /images/20221014/6565815cb031466f862913cad1e63dfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 6]: /images/20221014/1dee6fdaab504c72b880001ccba9cd4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 7]: /images/20221014/9fd58799429f4923a306dd242caea292.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 8]: /images/20221014/e2b4b86fc81d437ba96a5fa637d16dd6.png