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

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哈哈~,若有知识性错误请不要吝啬指正,提前感谢。