任务目标

  • 掌握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. red hat安装mysql二进制包

    数据包命名格式解释 mysql-5.7.15-linux-glibc2.5-x86_64.tar.gz 黑色粗体表示为包名称 蓝色表示linux系统二进制包 红色表示构架     1.上传mysql- ...

  2. 转：OSGI 实战 Equinox

    http://download.csdn.net/detail/ifmliuzhen/3231590

  3. android 画虚线、实线，画圆角矩形，一半圆角

    1.画虚线,实线: 建立dotted_line_gray.xml文件放在drawable文件夹下面. android:shape="line" 可以修改你想要的形状 <?xm ...

  4. c#什么时候使用virtual什么时候使用abstract

    一.C#中virtual与abstract的区别(引用"姓吕名布字子乔"的文章) C#的virtual & abstract经常让人混淆,这两个限定词都是为了让子类进行重新 ...

  5. SPSS数据分析—加权最小二乘法

    标准的线性回归模型的假设之一是因变量方差齐性,即因变量或残差的方差不随自身预测值或其他自变量的值变化而变化.但是有时候,这种情况会被违反,称为异方差性,比如因变量为储蓄额,自变量为家庭收入,显然高收入 ...

  6. 用原生js获取class

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. [iOS]浅谈NSRunloop工作原理和相关应用

    一. 认识NSRunloop  1.1 NSRunloop与程序运行 那么具体什么是NSRunLoop呢?其实NSRunLoop的本质是一个消息机制的处理模式.让我们首先来看一下程序的入口——main ...

  8. F4搜索帮助 带回多个值

    昨天群里有人问,就自己试了一下,POV执行在走PAI之前,所以空表行的时候TABLE里是没有数据的,所以一开始想用MIDOFY的想法看来不完善,可以再空表时做个APPEND.   后来又换了个想法,直 ...

  9. 原生JS实现购物车功能

    html <div class="catbox"> <table id="cartTable"> <thead> <t ...

  10. c语言迷宫游戏的实现

    // // main.c // 迷宫游戏代码实现 // #include <stdio.h> #define ROW 6 //宏定义行 #define COL 6 //宏定义列 /** * ...