网页设计如何左右布局 第1篇
在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高
两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，
比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器
这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器
这种布局适用于内容上具有明显主次关系的网页
三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之
大家最常见的就是github：
网页设计如何左右布局 第2篇
两栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在
实现思路也非常的简单：
使用 float 左浮左边栏 右边模块使用 margin-left 撑出内容块做内容展示 为父级元素添加BFC，防止下方元素飞到上方内容 代码如下：
还有一种更为简单的使用则是采取：flex弹性布局
flex可以说是最好的方案了，代码少，使用简单
注意的是，flex容器的一个默认属性值:align-items: stretch;
这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start
网页设计如何左右布局 第3篇
实现三栏布局中间自适应的布局方式有：
需要将中间的内容放在html结构最后，否则右侧会臣在中间内容的下方
实现代码如下：
原理如下：
这种实现方式存在缺陷：
基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序
实现流程：
实现过程：
缺点：
实现原理：
利用flex弹性布局，可以简单实现中间自适应
代码如下：
实现过程：
优点：
代码如下：
跟flex弹性布局一样的简单
希望本文能够对您有所帮助！如果您有任何问题或建议，请随时在评论区留言联系