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

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

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 系列知识点

可作为上下顺序排序类型有: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-* 兼容性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏后台及大数据开发

API接口设计:防参数篡改+防二次请求

API接口由于需要供第三方服务调用,所以必须暴露到外网,并提供了具体请求地址和请求参数

612
来自专栏西枫里博客

阿里短信通知的接入与实现(二)暨云通信短信平台API接口调用

事情变化太快,上线还不到一个月的注册短信验证功能就遇到了平台搬家的尴尬。阿里云发了一个邮件通知。原淘宝短信和阿里云市场短信将迁移到云通信平台,自2018年1月2...

753
来自专栏北京马哥教育

如何实现多站点运维监控?

在小型公司里如果产品线单一的话,比如就一个app, 一般1~2个运维就够用了,如果产品过于庞大,就需要多个运维人员,但对于多产品线的公司来说,运维人员就要必须...

752
来自专栏腾讯移动品质中心TMQ的专栏

解放你的双手—iOS自动测试基础

每一个测试人员都有一颗要做自动化测试的心,这不仅仅是因为自动化测试能在一定程度上提高测试效率,还在于这是测试人员自我价值的一个较好的体现,似乎不做自动测试都不好...

2035
来自专栏CodingBlock

Android学习笔记(一)Android应用程序的组成部分

  Android应用程序由松散耦合的组件组成,并使用应用程序Manifest绑定到一起;应用程序Manifest描述了每一组件和它们之间的交互方式,还用于指定...

1787
来自专栏逸鹏说道

再论 ASP.NET 中获取客户端IP地址

说到IP获取无非是我们常见的以下几种方式,但是具体获取的值具体区别在哪?网上不乏相关文章,说的也是很详细,但是真正使用起来,还有很多不太对的地方。IP在不同系统...

3307
来自专栏腾讯Bugly的专栏

《Pluto - iOS 上一个高性能的排版渲染引擎》

| 导语 Pluto 是 iOS 上的一个排版渲染引擎,通过 JSON/JS 文件可以很方便地描述界面元素,开发效率很高,并且在流畅度,内存等方便有保证 Qzo...

2847
来自专栏小灰灰

SPI框架实现之旅一:背景介绍

SPI框架实现之旅一:背景介绍 SPI的全名为Service Provider Interface,简单的总结下java spi机制的思想。我们系统里抽象的各...

19710
来自专栏phodal

我的职业是前端工程师【十】客户端存储艺术:数据存储与模型

Web或者移动应用的重心,由后台往前台挪动的两个标志是:客户端存储,客户端模型维护。在可见的未来,我们将会见证后端将不存储数据、由前端负责存储数据的应用。 写过...

17410
来自专栏有趣的Python

21- vue django restful framework 打造生鲜超市 -首页商品分类显示功能

Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 线上演示地址: http://vueshop.mt...

3518

扫码关注云+社区