[CSS]三栏布局的实现方法

三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应。
以下是两列定宽一列自适应的解决方案
假设：两列定宽宽度都为200px，第三列为宽度自适应，三列中间有一定间隔。

方法一：使用float+margin：

• 第一个div和第二个div的宽度200px（定宽）；
• 给第一个和第二个div设置float：left；第一个div添加属性margin-right：10px；第二个div不需要添加margin属性；
• 第一个div和第二个div的间隔10px，第三个div添加属性margin-left；margin-left的值，为前两个div的宽度2x200px+中间两个间隔2x10px；

方法二：使用float+overflow：

• 给第一个div和第二个div设置定宽30%，再设置float：left；
• 再给第三个div设置overflow:hidden，而不设置float:left;。
• 这样子两个盒子浮动，另一个盒子触发bfc达到自适应（因为浮动元素可以把父元素撑开而不超过父元素）

方法三：使用position：

• 父级div设置position：relative
• 三个子级div设置position：absolute
• 设置好第一个div和第二个div的宽度和left的值和margin-right的间隔，然后第三个div的left值为前面两个div的宽度+两个间隔，第三个div的right值设置为0可以实现最后一个div的拉伸效果
• 这个方法兼容性比较好；

方法四：使用table实现：

• 父级div设置display：table，设置border-spacing：10px，设置间距，取值随意，并将父元素的宽度设置为100%；
• 子级div设置display:table-cell，第一个和第二个div设置定宽，第三个div不需要设置宽度就可以自适应；
• 这种方法兼容性好，适用于高度宽度未知的情况，但是margin失效，设计间隔比较麻烦；

方法五：flex实现：

• parent的div设置display：flex；
• left和center的div设置margin-right；然后right 的div设置flex-grow：1；这样子right自适应，
• 但是flex的兼容性不好

方法六：grid实现：(bootstrap实现)

• parent的div设置display：grid，设置grid-template-columns属性，固定第一列第二列宽度，第三列auto，
• 对于两侧定宽中间自适应的布局，对于这种布局需要把center放在前面，可以采用双飞翼布局：圣杯布局，来实现，也可以使用上述方法中的grid，table，flex，position实现