缺点: 高度固定, IE8+兼容性, overflow:auto

为展示效果 父容器设900px高度
缺点: 无语义标签 优点兼容性好 高度自适应

以下为无意义文字以显示高度自适应
面向人群： 不熟悉基本的 CSS 布局者 难度： 简单 重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目标

掌握HTML/CSS布局的概念
掌握盒模型的概念
掌握position与float的概念以及在布局时的用法
任务描述

使用 HTML 与 CSS 按照 示例图（点击查看） 实现三栏式布局。
左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
任务注意事项

尝试 position 和 float 的效果，思考它们的异同和应用场景。
注意测试不同情况，尤其是极端情况下的效果。
图片和文字内容请自行替换，尽可能体现团队的特色。
调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。
改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。
其他效果图中给出的标识均被正确地实现。

为展示效果 父容器设900px高度
缺点: 无语义标签 优点兼容性好 高度自适应

以下为无意义文字以显示高度自适应
面向人群： 不熟悉基本的 CSS 布局者 难度： 简单 重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目标

掌握HTML/CSS布局的概念
掌握盒模型的概念
掌握position与float的概念以及在布局时的用法
任务描述

使用 HTML 与 CSS 按照 示例图（点击查看） 实现三栏式布局。
左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
任务注意事项

尝试 position 和 float 的效果，思考它们的异同和应用场景。
注意测试不同情况，尤其是极端情况下的效果。
图片和文字内容请自行替换，尽可能体现团队的特色。
调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。
改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。
其他效果图中给出的标识均被正确地实现。