1. 1. 任务介绍
  2. 2. 题目解析
    1. 2.1. BFC
    2. 2.2. 负边距
  3. 3. 实现效果及代码
Table of Contents

ife前端任务-三栏布局

任务介绍

任务目标

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

任务描述

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

任务注意事项

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

题目解析

此题需要注意两点:

  • 三栏布局中,中间栏宽度自适应
  • 父元素高度由三栏中最高元素确定

考虑两种实现方案:

  1. BFC
  2. 负边距

BFC

结合浮动和BFC,非常简单的可以满足题目要求,具体说明参见谈谈BFC

负边距

利用负边距的原理很简单,但必须先清楚float的排列方式:浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的(右)边界,除非后出现浮动元素的顶端在先出现浮动元素的底端下面。(关于浮动元素的更多内容,看《CSS权威指南 第三版》第10章 浮动和定位

利用负边距,我们可以将本身需要换行的浮动元素放到上一行。

实现效果及代码