关于CSS三列Float布局任务
任务目标
- 掌握HTML/CSS布局的概念
- 掌握盒模型的概念
- 掌握position与float的概念以及在布局时的用法
任务描述
- 使用 HTML 与 CSS 按照示意图;实现三栏式布局。
- 左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
任务注意事项
- 尝试 position 和 float 的效果,思考它们的异同和应用场景。
- 改变中间一栏的内容长度,以确保在中间一栏较高和右边一栏较高时,父元素的高度始终为子元素中最高的高度。
个人心得体会: 、
- 当子DIV中含有绝对属性时,因为脱离了文档流,无法做到父元素高度随子元素最大高度变化而变化;
- DIV_LEFT设置左浮动,DIV_RIGHT设置右浮动,再设置CENTER段落,会自动填充到中间列;
- 关于父DIV随子DIV中的最大高度变化,给父元素属性中添加 overflow:hidden;属性