页面多列布局

冷不防 2022-06-13 13:26 326阅读 0赞

### 多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局）   ###

[这里我会先讲两列布局中的定宽与自适应布局，然后再拓展到不定宽与自适应布局，最后再讲一下三列布局，由此衍生到四列五列等多列布局。][Link 1]

先讲解两列布局的多种解决方案。

老规矩，现在HTML文档BODY下写入：

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ -]   
  接着CSS设置parent主容器背景颜色为浅灰色，left背景颜色为黑色，right背景颜色为深灰色：

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 1]   
  这时候我们得到的效果图以及我们最终想要的定宽与自适应两列布局的效果图如下：

原始效果图： ![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 2]

最终效果图： ![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 3]（两列布局之间边距为10px）

好了，不废话了！

**两列布局的第一种解决方案：float+margin**

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 4]

这种解决方案的优点就是：兼容性很好（IE6不兼容，在IE6下right右边布局文字会缩进3px，需要在left样式加上margin-right：-100px）；缺点就是只能设置定宽与自适应两列布局，无法拓展至不定宽与自适应两列布局。

解决IE6兼容性问题，需修改下HTML结构：

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 5]（即在right容器外再套一个容器right-fix）

同时，CSS需更换为：  
 ![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 6]

**也就是说，解决方案优化为：float+margin+（fix），不过这个解决方案还是无法用于不定宽与自适应两列布局。**

**两列布局的第二种解决方案：float+overflow**

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 7]

这种解决方案的优点就是兼容性很好（除了IE6不支持），而且能够用于不定宽与自适应两列布局（只需把 width: 100px去掉即可变为不定宽与自适应两列布局）。

**两列布局的第三种解决方案：table**

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 8]   
  这种解决方案的缺点就是兼容性较差（IE6/7不支持），但是能够用于不定宽与自适应两列布局，同时CSS需更改为：

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 9]

**两列布局的第四种解决方案：flex**

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 10]

这种解决方案的缺点就是IE6/7/8/9不支持，IE10需加-ms-前缀才能使用，兼容性差；好处在于可以用于不定宽与自适应两列布局（只需去掉left中 width: 100px;即可）。

那么如果是三列布局或者四列、五列布局呢，这里举一个例子，例如要进行 **定宽+定宽+自适应**的三列布局：

首先HTML写入：

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 11]

CSS背景颜色跟两列布局一样：

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 12]   
  这里采用两列布局的第二种解决方案（float+overflow），我们只需要同时设置left和center就可以：

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 13]

这样就可以得到定宽+定宽+自适应的三列布局，效果图如下：

![多列布局的多种解决方案（一）（定宽或不定宽与自适应的布局） - 黄晓林 - 黄晓林的博客][- _ - 14]

同样的，去掉 width: 100px;就能得到不定宽+不定宽+自适应的三列布局。

其他三列、四列布局的解决方案由两列布局的解决方案拓展可以得出，万物归一！

[Link 1]: http://yxp.163.com/
[- _ -]: http://img1.ph.126.net/F0tR-huHV9cX2FmaUuHCiA==/4861072847894844034.png
[- _ - 1]: http://img0.ph.126.net/7l0D-BlZUrTGIWh6azLnkg==/6631671397582691238.png
[- _ - 2]: http://img1.ph.126.net/WUgRSuhdoOxlsT70Z6bFuQ==/6631779149722208140.png
[- _ - 3]: http://img1.ph.126.net/y1JJf4xXADavhhIbWn-OzA==/6631569143001303532.png
[- _ - 4]: http://img1.ph.126.net/uKLdhnCsQxM8GV4UOQEWDQ==/6631591133233860169.png
[- _ - 5]: http://img0.ph.126.net/s0TTBaEhSeQbjD5IcMKUDQ==/6631560346908280863.png
[- _ - 6]: http://img1.ph.126.net/ih66fyo9DzB1RGtkIpy4_w==/1993687260144837064.png
[- _ - 7]: http://img1.ph.126.net/5HViyNbFa4hnVaOcMBR89Q==/6631634014187343763.png
[- _ - 8]: http://img2.ph.126.net/I9l4crVSKnM80E1ED7imQA==/1626643890514143101.png
[- _ - 9]: http://img1.ph.126.net/lK9VhwPnAc3Y3kQu-v43sA==/6631828627745468581.png
[- _ - 10]: http://img0.ph.126.net/vaqEBe9hI8FJVzLxSXNyjg==/4927782417374696445.png
[- _ - 11]: http://img0.ph.126.net/paIiAbtu97y14W-fbj3uRg==/6631572441536189184.png
[- _ - 12]: http://img2.ph.126.net/x7pDUVAD8oFroeH1Dp9TQw==/6631774751675699447.png
[- _ - 13]: http://img2.ph.126.net/x61x4tTHQII1LnoDZT0Acg==/6631562545931539319.png
[- _ - 14]: http://img2.ph.126.net/RM1MtiRna6trpdpZZ0j9gg==/6631817632629185933.png