三栏布局——左右固定，中间自适应-向日葵屋

三栏布局——左右固定，中间自适应

Dear 丶 2022-06-12 01:45 378阅读 0赞

之前有写过关于固定父布局，然后父布局内有是两列自适应。现在我们来看看三栏布局，当左右固定，中间的布适应是如何实现的。

这里将介绍两种方法，一种是使用margin值，另一种是使用position绝对定位。

首先我们来看第一种方法，下面是实现的代码：

无标题文档
    left 
    right 
    1.请补充右侧编辑器的任务1，使left部分绝对定位；2.请补充右侧编辑器的任务2，使main水平居中在浏览器中央，并且与左右div有10px的间距3.请补充右侧编辑器的任务3，使right定位在右侧完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。如果代码无误，效果未出现，请拷贝到本地编辑器进行调试。

左右两列都设置成为固定的宽度，并且左边设置了左浮动，右边设置了右浮动。中间的列我们就使用margin值，margin有4个属性，代表着上，右，下，左的四个方向，我们设置了左边宽度为200px,右边的宽度为300px，也就是说中间需要离左边200px的距离，离右边300px的距离。但是需要将最后的一列放置在中间，如上述代码所述。

另一种方法是使用position的绝对定位，让其脱离文档流。

无标题文档
    left 
    1.请补充右侧编辑器的任务1，使left部分绝对定位；2.请补充右侧编辑器的任务2，使main水平居中在浏览器中央，并且与左右div有10px的间距3.请补充右侧编辑器的任务3，使right定位在右侧完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。如果代码无误，效果未出现，请拷贝到本地编辑器进行调试。 
    right