之前有写过关于固定父布局,然后父布局内有是两列自适应。现在我们来看看三栏布局,当左右固定,中间的布适应是如何实现的。
这里将介绍两种方法,一种是使用margin值,另一种是使用position绝对定位。
首先我们来看第一种方法,下面是实现的代码:
无标题文档
left
right
1.请补充右侧编辑器的任务1,使left部分绝对定位;2.请补充右侧编辑器的任务2,使main水平居中在浏览器中央,并且与左右div有10px的间距3.请补充右侧编辑器的任务3,使right定位在右侧完成任务后,请验证是否与实践描述效果一致,如一致,恭喜您,你已经掌握此技能,否则,请重复学习此节内容。如果代码无误,效果未出现,请拷贝到本地编辑器进行调试。
另一种方法是使用position的绝对定位,让其脱离文档流。
无标题文档
left
1.请补充右侧编辑器的任务1,使left部分绝对定位;2.请补充右侧编辑器的任务2,使main水平居中在浏览器中央,并且与左右div有10px的间距3.请补充右侧编辑器的任务3,使right定位在右侧完成任务后,请验证是否与实践描述效果一致,如一致,恭喜您,你已经掌握此技能,否则,请重复学习此节内容。如果代码无误,效果未出现,请拷贝到本地编辑器进行调试。
right