两栏自适应布局延展到多栏自适应布局

1、网上很多文章了，为什么还要讲？

 　　说到两栏自适应布局，估计很多人看到这样类似的文章，我经常也看过，但是那些实现方式跟我所经常使用的两种方法不一样，经常使用的意思是，我一遇到这种布局，立马想到的就是使用这种。就像我们拿东西，我们立马就会想到用手拿，当然还有很多方式可以拿到，比如用嘴刁。 所以，当我们看到多种实现方式的时候，一定要学会比较，然后选择其中一两种作为常用布局记到深处，就是想都不用想就用的。 

2、先看效果，自己先看看，如果懂了，就不要看其他解释文字了， 节约时间

See the Pen Layouts by wenjie (@wenjie) on CodePen.

点击右上角那个 CodePen Logo可以在新页面看，大点看对眼睛好

3 、解释一下　

　　overflow方式主要原理： 固定宽度（block设置了宽度，或者inline-block元素自己的宽度）那一块浮动起来，放在最前面；自适应那一块一定要放在最后，宽度不能设置即宽度要为auto，设置overflow为hidden或者scroll等（目的形成BFC。overflow为visible不能形成BFC，其他都可以，自己可以搜索文章看看）。

       table-cel l方式主要原理：原理跟overflow类似，唯一不同的是它设置了一个很大很大的宽度，由于table-cell有自己的最大宽度，所以我们设置很大是为了 到达它的最大宽度，也就是浏览器的边缘吧。

      margin负值在网上写得风生水起，但个人不是很喜欢使用，我认为它的唯一优点就是能把自适应内容的标签放在了最前面 ，使SEO更友好，因为SEO一进来就获取到了最重要的内容。 但margin负值会增加更多的难度，设置甚至排查问题可能会花更多时间。所以margin负值我就是学一学的姿态，用不用取决于心情。

4、 多栏布局

     延展到多栏布局，是一样的，其实没啥可说的，就是把所有固定宽度的栏目放在最前面浮动起来，把自适应的部分放在最后即可。

5、几点地方要注意

      因为用了浮动，所以记得父容器清除浮动，比如我直接用overflow:auto清除浮动、也可以用我们常写的 class=clearfix。

      如果是英文网站或者文章里面有英文 还要考虑长英文单词的时候，这个时候如果单词在边缘就会被截断，这个时候，自适应的容器就要加上 word-wrap: break-word; 进行处理。

6、其他几种方式

      还有其他很多很多种方式，大家随便一搜就能搜到，比如CSS3的 calc(100% - x)这个其实我在移动端也经常使用，它的缺点就是旧版浏览器的兼容问题。

7、工作繁忙，没啥时间，文章粗糙

     文章中可能有错别字造成难以理解的，也请指出，若不影响大家吸收主要内容就算了吧，O(∩_∩)O哈哈~，若有知识性错误请不要吝啬指正，提前感谢。

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有