两栏自适应布局延展到多栏自适应布局
2017-08-12 15:12
155 查看
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哈哈~,若有知识性错误请不要吝啬指正,提前感谢。相关文章推荐
- 两栏等高布局||两栏自适应高度
- CSS的自适应两栏/七种三栏布局
- 两栏自适应布局,左边固定和右边固定的区别
- css实现两栏自适应布局
- 两栏自适应布局
- 两栏自适应布局
- CSS布局:中栏固定宽度,左右两栏宽度自适应
- 两栏自适应布局,右侧div宽高不定
- 左右两栏div布局,高度自适应
- 浅谈CSS两栏、三栏自适应布局
- 两栏布局,左侧固定宽度,右侧自适应大小
- 两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)
- 利用float与overflow:hidden实现移动端两栏自适应布局
- [CSS]两栏自适应布局
- 前端面试之两栏布局,左侧固定右侧自适应;三栏布局,左右定宽,中间自适应
- css 关于两栏布局,左边固定,右边自适应
- css布局: 两栏 自适应高度
- 两栏布局自适应主流方法
- css实现等高布局 两栏自适应布局 三栏自适应布局
- CSS 实现:两栏布局(一边固定,一边自适应)