web前端之三栏布局的五种解决方案

超、凢脫俗 2023-05-29 05:11 154阅读 0赞

### web前端之三栏布局的五种解决方案 ###

*   *  方法一 浮动定位
     *  方法二 绝对定位
     *  方法三 flex布局（优先使用）
     *  方法四 表格布局
     *  方法五 网格布局
     *  延伸

自己在vscode上敲完测试完总结的，欢迎指教。

问题描述：假设高度已知，请写出三栏布局，其中左栏、右栏的宽度为300px，中间自适应

## 方法一 浮动定位 ##

采用float浮动来解决，一个容器中设置三个块域，将左侧块域像左浮动，右侧块域向右浮动，中间自适应宽度。如图代码所示：  
![浮动布局][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]

1.  **优点** ：兼容性好；
2.  **缺点** ：脱离文档流，要做清除浮动的操作，浮动周边的元素要处理好；  
    ps：清除浮动的方案我随后会另写一篇博客详细说明：

## 方法二 绝对定位 ##

采用绝对定位来解决，一个容器中设置三个块域，将中间块域离左右边界的距离设置为300px。如图代码所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]

1.  **优点** ：快捷，设置方便，不容易出问题；
2.  **缺点** ：脱离文档流，下面的子元素也都是脱离文档流的，有效性和可使用性较差；

## 方法三 flex布局（优先使用） ##

采用flex布局来解决，设置一个容器，容器中有三块块域，将容器指定为为flex布局，将左右块域的宽度设置为300px，中间自适应宽度。如图代码所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]

1.  **优点** ：css3新增的一个特性，算是完美的解决了上述两种方案的缺点，目前移动端的布局基本上都是用flex的；
2.  **缺点** ：兼容性的问题，IE8以下的版本不支持；

## 方法四 表格布局 ##

采用表格布局来解决，设置一个容器，容器中有三块块域，将容器指定为为table布局，每个块域指定为table-cell，左右块域的宽度设置为300px，中间自适应宽度。如图代码所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 3]

1.  **优点** ：兼容性好，flex布局不兼容的时候可以用表格布局实现；
2.  **缺点** ：表格布局的时候如果某一个单元格被撑开的时候其他的同行单元格也会被撑为同等高度；

## 方法五 网格布局 ##

采用网格布局来解决，设置一个容器，容器中有三块块域，将容器指定为为grid布局，设置对应行和列的数量以及宽度。如图代码所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 4]  
**优点** ：比较新的技术，比较完美；

## 延伸 ##

如果该题目中高度未知，上述方法中浮动布局、绝对定位、网格布局是不适用的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104142756975.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104143917385.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191104145427943.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191104150037833.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191104151128300.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70