1、两栏布局
我们要实现下面这样一个东西:两栏,左边一栏,右边一栏,左边宽高固定,右边宽高自适应,见下图:
✍我们有两种解决办法:(1)给右边盒子加外边距(2)calc函数的运用
第一种方法:(1)给右边盒子加外边距
代码实现:
思路:给左边那个盒子高度100%,宽度固定,浮动起来,右边那个盒子宽度自适应,高度100%,左边设置200px宽的外边距,就能实现这个效果了。
结果:
可能有的疑惑:
1.没有让左盒子浮动和有盒子设置外边距的原来样子是:上面是左边盒子,下面是右边盒子,我们让左边盒子浮动以后,有盒子上去了,但是有一部分被左边盒子挡住了,挡住的刚好是左边盒子的宽度大小,所以我们给右边盒子设置了一个跟左边盒子宽度大小的外边距,这样右边盒子也可以正常显示了。
2.有人又想了,把左边和右边盒子都浮动起来不就可以了吗,不行的,因为右边盒子,我们的宽度设置的是宽度自适应,是对于整个浏览器来讲的,要是浮动起来了就脱离了浏览器,就没有宽度了,宽度为0,所以页面上不显示右边盒子了。
第二种方法:(2)calc函数的运用
注意:calc函数在运用的时候,括号里面的运算符号要和两侧的数字中间有空格,例如calc
(100% - 200px),减号左右都是空格。
结果:
calc函数是让代码中的算术计算生效的一个函数。代码的思路是:让左边盒子浮动起来,右边盒子也浮动起来,左边盒子固定200px宽度,右边盒子占剩下的宽墩。
2、三栏布局
三栏布局就是像下面这样,左边和右边固定,中间自适应
代码:
这里的思路和上面两栏布局一样使用calc函数,但是这里有一个调整注意一下,就是三栏布局要先将左右两个盒子固定起来,然后再让中间盒子自适应,看代码div‘盒子,先写class=right,然后再写盒子div class=center。’
结果:
3、综合布局
如果我们要实现上面的效果呢,上面和下面盒子固定,中间盒子自适应,中间盒子包括左边盒子右边盒子和中间盒子,左右盒子固定,中间盒子自适应,用代码怎么实现呢,看下面详情:
代码:先设计好上中下的盒子
结果:
然后再设计中间部分的,代码如下:
结果: