前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >布局响应式方法:dispaly:table-*分组系列

布局响应式方法:dispaly:table-*分组系列

作者头像
练小习
发布2017-12-29 11:10:33
1.2K0
发布2017-12-29 11:10:33
举报
文章被收录于专栏:练小习的专栏

介绍之前先看个常见的两栏图文介绍模块,宽屏是左边是图片右边是文字,或者左边是文字右边是图片。到窄屏下图片统一在上方,文案在下方。响应式效果如下:

demo

通常我们为了实现上面设计的响应式需求,为了支持窄屏下图片统一在上方,会把上下两行的图片和文字代码顺序保持一致,像下面

<div class="product fl"> <div class="figure"> <img src="css/img/product/img1.png" alt="高标准"> </div> <div class="details"> <p class="summary">高标准</p> <p>数据中心符合T4级别数据中心标准华北地区</p> </div> </div> <div class="product fr"> <div class="figure"> <img src="css/img/product/img1.png" alt="高标准"> </div> <div class="details"> <p class="summary">高标准</p> <p>数据中心符合T4级别数据中心标准华北地区</p> <p>数据中心符合T4级别数据中心标准华北地区</p> <p>数据中心符合T4级别数据中心标准华北地区</p> <p>数据中心符合T4级别数据中心标准华北地区</p> </div> </div>

.fl .figure { float: left; } .fr .details { float: right; }

然后在宽屏中给容器加一个 class 来已区分上下行,通过控制元素浮动或绝对定位实现上述表现。响应窄屏时,再把浮动清除掉。

@media screen and (max-width: 568px) { .fl .figure { float: none; } .fr .details { float: none; } }

而效果图里的html结构是这样子的

<div class="product"> <div class="figure"> <img src="css/img/product/img1.png" alt="高标准"> </div> <div class="details"> <p class="summary">高标准</p> <p>数据中心符合T4级别数据中心标准华北地区</p> </div> </div> <div class="product"> <div class="details"> <p class="summary">高标准</p> <p>数据中心符合T4级别数据中心标准华北地区</p> <p>数据中心符合T4级别数据中心标准华北地区</p> <p>数据中心符合T4级别数据中心标准华北地区</p> </div> <div class="figure"> <img src="css/img/product/img1.png" alt="高标准"> </div> </div>

图片和文字按宽屏的内容顺序摆放 html ,与上面方式相比,一种是由 class 钩子来控制显示位置,一种是由 html 顺序来控制显示位置,两者方式都是 可以的。

而本篇文章想介绍的是由 html 顺序控制显示位置这种代码结构,在窄屏中是如何让图片统一显示在上方的实现方法。它的核心是使用 dislay 属性的 table-* 分组类型调整元素的顺序位置。响应窄屏的相关代码如下:

@media screen and (max-width: 568px) { .product .figure { display: table-header-group; } .product .details { display: table-footer-group; } }

重温下关于 display:table 系列知识点

doc_image_1_w719_h299
doc_image_1_w719_h299

可作为上下顺序排序类型有:table-caption、table-header-group、table-row-group、、table-footer-group。

类似 html table 结构,它们的显示顺序由上到下 table-caption > table-header-group > table-row-group > table-footer-group。

通过示例还可以举一反三,比如多栏布局的响应切换:三栏布局、四栏布局等等;或者上下栏在网页显示位置调换。

结语

1、 移动端浏览器对 flexbox、grid 还未完全兼容,使用 display:Table-* 分组系列,可以实现类似 flexbox、gird 的 order 属性效果,也是一种不错选择方式。

2、display:table-* 其他系列在移动端上也是相当好用。

希望这篇文章能给大家有所帮助,在响应式实现上带来新的思路。

Table-* 兼容性

doc_image_2_w1253_h361
doc_image_2_w1253_h361
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档