任务目标

  • 掌握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. contiki-断点的保存和恢复

    保存断点 保存断点是通过保存行数来完成的,在被中断的地方插入编译器关键字_LINE_,编译器便自动记录所终端的行数.展开那些具有中断功能的宏,可以发现最后保存行数是宏LC_SET,取宏PROCESS_ ...

  2. 005_kafka_Java_API

    1.生产者Producer 1)添加依赖 <dependency> <groupId>org.apache.kafka</groupId> <artifact ...

  3. HTTP 错误 500.23 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置。

    检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). - CatcherX 2014-03-11 11:03 27628人阅读 评论(2) 收藏 举报  分类 ...

  4. tensorflow版的bvlc模型

    研究相关的图片分类,偶然看到bvlc模型,但是没有tensorflow版本的,所以将caffe版本的改成了tensorflow的: 关于模型这个图: 下面贴出通用模板: from __future__ ...

  5. 强大的命令行工具wmic

    1.wmic=Microsoft Windows Management Instrumentation 2. C:\WINDOWS\system32\wbem 下的东西,特别是.xsl格式化文件,实现 ...

  6. java replace和replaceAll

    replace和replaceAll是JAVA中常用的替换字符的方法 public String replace(char oldChar, char newChar)         在字符串中用n ...

  7. SQL Server附加数据库问题

    SQL Server附加数据库时,遇到如下问题:“如果升级全文目录,请单加“添加目录”,然后找到它并选择它.基于全文升级选项,全文索引将为“已导入”.” 解决方法: 选择数据库文件所在目录,右键-&g ...

  8. jquery multiselect使用示例

    多选下拉框开源组件:https://github.com/ehynds/jquery-ui-multiselect-widget html部分: <select multiple id=&quo ...

  9. ios中属性和对象的初始化

    属性和对象的初始化为了方便记忆, 我们可以都使用self.来初始化. 这样可以避免内存的过度释放.

  10. java selenium (九) 常见web UI 元素操作 及API使用

    本篇介绍我们如何利用selenium 来操作各种页面元素 阅读目录  链接(link) <div> <p>链接 link</p> <a href=" ...