本文主要是介绍CSS实现三列布局的3种方法及解析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
答案：
-
1. CSS浮动
第一个 float:left，第二个 float:right，第三个设置margin-left和margin-right
-
2. 绝对定位法
第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right
-
3. flex布局
将父元素box设为 display:flex;可将box设置为弹性盒模型进行布局
两栏布局：https://www.jianshu.com/p/267239f8e4b2
详细解析：
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见。
比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。
1. 浮动布局：第一个float:left，第二个float:right，第三个设置margin-left和margin-right
左栏左浮动，右栏右浮动，中间主体放在左栏右栏后面（中间栏会占据整行）。
注意点：必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。
中间的宽度不固定，所以要加上margin左右的宽度让左右元素浮动
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.left {width: 400px;height: 500px;background: red;float: left;}.center {height: 500px;background: yellow;margin-left: 470px;margin-right: 470px;}.right {width: 400px;height: 500px;background: red;float: right;}</style>
</head><body><div class="left"></div><div class="right"></div><div class="center"></div>
</body></html>
2. 绝对布局：第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right
两边用绝对定位，中间用margin，左右宽度固定，中间宽度不固定，中间主体放在左栏右栏后面（中间栏会占据整行）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.left {width: 400px;height: 500px;background: red;position: absolute;left: 0;}.center {height: 500px;background: yellow;margin-left: 470px;margin-right: 470px;}.right {width: 400px;height: 500px;background: red;position: absolute;right: 0;}</style>
</head><body><div class="left"></div><div class="right"></div><div class="center"></div>
</body></html>
3. flex布局：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局.
- flex-grow属性定义项目的放大比例，默认为0（不放大），即如果存在剩余空间，也不放大。
- flex-shrink属性定义了项目的缩小比例，默认为1（缩），即如果空间不足，该项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为auto，即项目的本来大小。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box {width: 100%;height: 500px;display: flex;margin: 10px;}.left,.right {width: 400px;height: 500px;margin: 10px;background-color: red;}.center {/* flex属性是flex-grow,flex-shrink,flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */flex: 1; /* 放大 */height: 500px;margin: 10px;/*左右margin不会叠加*/background-color: yellow;}</style>
</head><body><div class="box"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div>
</body></html>
这篇关于CSS实现三列布局的3种方法及解析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
