百度前端技术学院任务三--三列布局
来源:互联网 发布:beat it软件 编辑:程序博客网 时间:2024/05/16 10:29
1 百度前端任务三出现问题:
任务描述:
任务目标
- 掌握HTML/CSS布局的概念
- 掌握盒模型的概念
- 掌握position与float的概念以及在布局时的用法
任务描述
- 使用 HTML 与 CSS 按照 示例图(点击查看) 实现三栏式布局。
- 左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
任务注意事项
- 尝试 position 和 float 的效果,思考它们的异同和应用场景。
- 注意测试不同情况,尤其是极端情况下的效果。
- 图片和文字内容请自行替换,尽可能体现团队的特色。
- 调节浏览器宽度,固定宽度和自适应宽度的效果始终符合预期。
- 改变中间一栏的内容长度,以确保在中间一栏较高和右边一栏较高时,父元素的高度始终为子元素中最高的高度。
- 其他效果图中给出的标识均被正确地实现。
实现思路:
设置三个div,分别代表左中右三个区域.让左边的左浮动右边的又浮动,中间的的左右浮动大一点.
遇到的第一个问题:
当三个div如此布局时,那么会出现,如下现象
会将右边的div挤下去,
经过分析发现对三种布局理解的不是很清楚(流式布局,浮动布局和固定布局)
默认的是流式布局,由于class=center的div没有使用浮动布局和固定布局,那么那就是默认的流式布局
div是一个块状元素,那么它本身就应该是占据一行,所以他就会把右边的div挤下去.明白这一点,那么我们可以推测如果将center的div放到最前面,那么他也会将左边的div挤下去.实验证明是正确的
所以这个问题的解决方法是将center的div放置在最后面.这样就不会出现流式布局挤掉浮动布局了.
PS 主要是 center的div宽度不固定.如果他的宽度固定,可以使用float:left,和margin:0 auto;解决.
同时这个还有其他的方法,比如说使用
这三种方法不是很适合这道题,其实是复习一下水平居中的知识.
2遇到的第二个问题:
题目中要求外面的盒子要根据三个div的高度来自适应,
但是又是三种布局问题,他只是对流式布局进行自适应,所以出现问题.
解决办法:1 在父级元素中使用最小高度.min-hight:600px
2 使用overflow:auto,这样的意思是将子元素的盖度设置为不能超过父元素
0 0
- 百度前端技术学院任务三--三列布局
- 百度前端技术学院(IFE)第一阶段任务
- 百度前端技术学院任务之JS篇
- 【WEB】百度前端技术学院任务汇总
- 百度前端技术学院-任务四模拟队列
- 百度Web前端技术学院--三栏式布局
- 百度前端技术学院 任务八:响应式网格(栅格化)布局
- 百度前端技术学院 task3
- 百度前端技术学院task
- 百度前端技术学院task
- 百度前端Web技术学院
- 2017百度前端技术学院
- 百度前端技术学院 任务四:定位和居中问题
- 《百度前端技术学院》任务一:零基础HTML编码
- 百度前端技术学院(IFE)2017春-热身任务
- 百度前端技术学院任务二(有改动)-转载笔记
- 百度前端学院春季任务三笔记
- 关于CSS三列Float布局任务
- 智能指针
- selenium+python send_keys() 上传文件
- R中的函数
- STL heap 的用法
- 蓝桥杯——算法训练 未名湖边的烦恼
- 百度前端技术学院任务三--三列布局
- MyReport报表引擎2.7.8.8新功能
- Visual Paradigm及Sequence实例
- 获取Android设备唯一标识码
- Linux内核分析:实验七
- codeforces 660D (STL map)
- UISlider-IOS开发
- hihocode 第九十二周 数论一·Miller-Rabin质数测试
- 在win2012r2上安装KMS模拟器和IDEA激活模拟器并设置开机自启