任务目标

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

任务描述

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

任务注意事项

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

个人心得体会：        、

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

关于CSS三列Float布局任务的更多相关文章

  1. CSS三列自适应布局（两边宽度固定，中间自适应）

    https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/art ...

  2. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  3. [CSS布局]简单的CSS三列布局

    前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...

  4. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  5. CSS两列及三列自适应布局方法整理

    布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...

  6. CSS三列布局之左右宽度固定，中间元素自适应问题

    最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...

  7. css 三列布局

    前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中 ...

  8. css两列自适应布局的多种实现方式及原理。

    两列布局是非常常见的需求在实际项目中,实现的方式也有很多.究其原理也都不算复杂.这里主要提出几种实现方式和原理. html页面基本布局如下代码所示: 1 <div class="mai ...

  9. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

随机推荐

  1. AutoCAD Civil 3D 中缓和曲线的定义

    本文对AutoCAD Civil 3D中缓和曲线的定义进行了整理. 原英文网页如下: https://knowledge.autodesk.com/support/autocad-civil-3d/l ...

  2. Jquery实现账单全部选中和部分选中管理

    在做购物车系统是我们往往会遇到这样一个需求,在点击全选框时我们要将全部的单个账单都选中;在单个选中账单时,如果账单全部被选中则需要全选框处于选中状态,若没有全部被选中则全选框处于没选中状态; 以下是在 ...

  3. 关于SQLite的伪随机数

    --random() 的返回值范围是:[-2^63,(2^63)-1],而通常要的是最小为 0的随机数,于是就不能直接用了,解决办法: then col else -col end) result f ...

  4. 在Emacs 24.4中使用在线字典

    使用Emacs时经常需要查英语字典怎么办?切到浏览器查?太慢.我想到一个高效的解决方案,利用新发布的Emacs 24.4中的Web浏览器eww,在Emacs中集成一个在线字典,查询光标处的字,一键搞定 ...

  5. Java中如何克隆集合——ArrayList和HashSet深拷贝

    编程人员经常误用各个集合类提供的拷贝构造函数作为克隆List,Set,ArrayList,HashSet或者其他集合实现的方法.需要记住的是,Java集合的拷贝构造函数只提供浅拷贝而不是深拷贝,这意味 ...

  6. 多行溢出隐藏显示省略号功能的JS实现

    在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...

  7. H5一行显示两个正方形

    1)有时候一些图片会是正方形或者长方形,对于这样的图片一般都是居中显示到正方体内,代码如下:  .exhibition_list img{width:100%;position: relative;t ...

  8. [转]EntityFramework状态变化AutoDetectChangesEnabled与SaveChanged参数说明

    一.约定OnModelCreating 有一些限制需要注意,例如:1.表名不支持使用标签进行标注2.最小长度在 OnModelCreating 中不支持3.正则表达式在 OnModelCreating ...

  9. 艺萌TCP文件传输及自动更新系统介绍（TCP文件传输）（四）

    艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开源,作者是英国的,开发时间5年多,框架很稳定. 项 ...

  10. java中调用xml的方法：DocumentBuilderFactory

    具体的使用方法如下: (1)得到 DOM 解析器的工厂实例 DocumentBuilderFactory domfac=DocumentBuilderFactory.newInstance(); (2 ...