通过宽高自适应设计两栏布局和三栏布局

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、综合布局

 如果我们要实现上面的效果呢，上面和下面盒子固定，中间盒子自适应，中间盒子包括左边盒子右边盒子和中间盒子，左右盒子固定，中间盒子自适应，用代码怎么实现呢，看下面详情：

代码：先设计好上中下的盒子

 结果：

 然后再设计中间部分的，代码如下：

 结果：