任务目标

  • 掌握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. 火狐浏览器 js 1到9月份 new DATE不返回时间

    new Date('2016-1'); //错误 1到9月份必须 01 02 ...... 正确 new Date('2016-01'); var nowMonth = nowMonth>=10 ...

  2. Surface与SurfaceView、SurfaceHolder

    什么是Surface? android API的解释是:Handle onto a raw buffer that is being managed by the screen compositor ...

  3. jq异步上传文件（转载）

    最近在使用ajaxForm,随便把使用方法记下下来,以便以后回顾. 1 ,引入依赖脚本 <script type="text/JavaScript" src="/j ...

  4. 第一章 Java的I/O演进之路

    I/O基础入门 Java的I/O演进 第一章 Java的I/O演进之路 1.1 I/O基础入门 1.1.1 Linux网络I/O模型简介 根据UNIX网络编程对I/O模型的分类,UNIX提供了5中I/ ...

  5. 如何在页面进入时就加载js

    页面一打开就执行JS的代码! onLoadwindow.onLoad=function(){}window.onload=function(){ } 补充:window.onload和doucumen ...

  6. Entity framework在用于WCF时创建数据模型的问题

    众所周知,WCF的传输对象,在创建时需要在类名上标识[DataContract]以及在属性上标识[DataMember],当我们在使用Entity framework时(不考虑Code first的情 ...

  7. 《精通C#》自定义类型转化-扩展方法-匿名类型-指针类型（11.3-11.6）

    1.类型转化在C#中有很多,常用的是int类型转string等,这些都有微软给我们定义好的,我们需要的时候直接调用就是了,这是值类型中的转化,有时候我们还会需要类类型(包括结构struct)的转化,还 ...

  8. Java EE : 二、图解 Cookie（小甜饼）

    目录 Java EE : 一.图解Http协议 Java EE : 二.图解 Cookie(小甜饼) Java EE : 三.图解Session(会话) 概述 一.概述 二.详细介绍Cookie 传输 ...

  9. Error 403--Forbidden

    转自他人:From RFC 2068 Hypertext Transfer Protocol -- HTTP/1.1:10.4.4 403 ForbiddenThe server understood ...

  10. cocoapod集成失败，无法找到头文件的解决办法

    在终端更新pod的时候,提示警告: target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support ...