百度前端技术学院任务三--三列布局

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,这样的意思是将子元素的盖度设置为不能超过父元素