目标

• 掌握自适应布局的解决方案（一列定宽一列自适应，或者一列不定宽另一列自适应）
• 掌握等宽布局的解决方案（多列等宽）
• 掌握等高布局的解决方案（多列等高）

定宽+自适应

• float+margin
  

  定宽自适应1.png

• float+overflow
  不加overflowhidden时，左右会叠起来形成文字环绕，加了之后出发bfc如图
  

  定宽自适应2-1.png

然后给left添加margin将他们分开如图

定宽自适应2-2.png

• table
  给父元素设置宽度100%，不然只是内容的宽度，加上table-layout是为了布局优先，不然，就算你设置定死的宽度，他也有可能被内容影响。table在设置了table-layout，并且left和right设置了tablecell后，left和right就成了两个单元格，同时他们两个单元格是等宽的。由于tablecell不能设置margin，所以利用padding-right
  

  定宽自适应3.png

• flex布局

  
  
  定宽自适应4-1.png

然后我们让right充满剩余的宽度，设置flex为1，这是简写，全程是110，让他的缩放因子为1，设置left为100px后，left就不参与缩放因子的分配内面，所以剩余的宽度都给了right。

定宽自适应4-2.png

两列定宽，一列自适应

其实和之前的代码都是一样的，就不一一举例了。

定宽自适应5.png

不定宽+自适应

1.float+overflow

左边的宽度是随着内容变换的，所以将p设置成不同的宽度都行

不定宽自适应1.png

2.table

这次没有加table-layout:fixed，所以是内容优先的，现在左右两列不等宽，left比right少一个字母。

不定宽自适应2-1.png

然后将左边的宽度设置成一个较小值，如0.1%，他并没有真实缩小到这个程度，而是由内容撑开的宽度，因为我们没有设置table-layout:fixed，所以是内容优先。

不定宽自适应2-2.png

然后给左边的内容设置宽度，那么左边就是由内容定的宽度。

不定宽自适应2-3.png

2.flex

不定宽自适应3-1.png

只要将左边的定宽给去掉

不定宽自适应3-2.png

多列不定宽+自适应

前面介绍的几种方案都可以做这件事情，如。

不定宽自适应4.png

等宽布局

当外面的宽度变宽时，这四列都要变宽，而且始终都需要一样宽。

1.float？

确实可以利用浮动，再把每一列设置成25%。

等宽1-1.png

但是如果之间有间隙就不行。

等宽1-2.png

为了解决这个问题

等宽1-3.png

演变之后

等宽1-4.png

等宽1-5.png

等宽1-6.png

这种方式有一个缺点，就是必须知道总共有几列，不然百分比无法确定。

table布局就可以做到

2.table

思考：如果不加不加外面的parent-fix如何做到？

等宽1-7.png

3.flex

等宽2-1.png

等宽2-2.png

等宽2-3.png

等高布局

目标效果：

1等高布局.png

1等高布局1-1.png

1等高布局1-2.png

background的背景颜色是会默认在border区域的，所以设置background-clip:padding-box;这样就会把border的背景颜色裁剪掉。

flex

1等高布局2-1.png

float

这种只是背景颜色看上去等高，不是真正意义上的等高。所以，最好用前面两种方案。

1等高布局3-1.png

1等高布局3-2.png

1等高布局3-3.png