前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >两栏自适应布局延展到多栏自适应布局

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

作者头像
javascript.shop
发布2019-09-04 16:43:52
6430
发布2019-09-04 16:43:52
举报
文章被收录于专栏:杰的记事本杰的记事本

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014年3月17日2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、网上很多文章了,为什么还要讲?
  • 2、先看效果,自己先看看,如果懂了,就不要看其他解释文字了, 节约时间
  • 3 、解释一下 
  • 4、 多栏布局
  • 5、几点地方要注意
  • 6、其他几种方式
  • 7、工作繁忙,没啥时间,文章粗糙
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档