关于CSS三列Float布局任务

来源:互联网 发布:软件培训会议纪要 编辑:程序博客网 时间:2024/05/22 06:19
任务目标
  • 掌握HTML/CSS布局的概念
  • 掌握盒模型的概念
  • 掌握position与float的概念以及在布局时的用法

任务描述

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

任务注意事项

  • 尝试 position 和 float 的效果,思考它们的异同和应用场景。
  • 改变中间一栏的内容长度,以确保在中间一栏较高和右边一栏较高时,父元素的高度始终为子元素中最高的高度。        

个人心得体会:        、

  1. 当子DIV中含有绝对属性时,因为脱离了文档流,无法做到父元素高度随子元素最大高度变化而变化;
  2. DIV_LEFT设置左浮动,DIV_RIGHT设置右浮动,再设置CENTER段落,会自动填充到中间列;      
  3. 关于父DIV随子DIV中的最大高度变化,给父元素属性中添加 overflow:hidden;属性
                            
0 0
原创粉丝点击