布局响应式方法: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 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

聊一聊“@font-face”

在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢? 案例: ? 首先先了解关于@font-face的基本知识 1、@font-...

2825
来自专栏君赏技术博客

关于首页设计框架和一些细节处理分析

开始觉得很简单,毕竟我也是对于 UITableView和 UICollectionView 很溜的码农。

802
来自专栏CSDN技术头条

Mark!Android最佳的开源库集锦

工欲善其事,必先利其器。一个好的开发库可以快速提高开发者的工作效率,甚至让开发工作变得简单。本文收集了大量的Android开发库,快来切磋一下,到底哪一个最适合...

1857
来自专栏企鹅号快讯

2017年最佳的20款css工具

1.Radiobox ? 小型CSS3动画集合,适用于表现无线电输入内容。 2.SpinThatShit ? 面向单一元素加载器与运行器的SCSS集合。 3.T...

18410
来自专栏ThoughtWorks

前端不止:请告诉我,你要什么样的图标

有一个英语成语叫做一画胜千言(A picture is worth a thousand words),不知道大家有没有听过?它是指的是一张静态的图片就可表达一...

3677
来自专栏IMWeb前端团队

全响应式web前端开发

本文作者:IMWeb Terrance 原文出处:IMWeb社区 未经同意,禁止转载 ? Responsive web design (RWD) i...

2137
来自专栏无原型不设计

你所不知道的快速原型设计技巧

快速原型设计工具,怎么选?当然是要快,要简单,这样回答很正确,但太笼统。具体来讲,交互设置要简单方便,组件的交互和样式要复用高效,方便重复使用,才能算真正的更快...

1196
来自专栏腾讯大讲堂的专栏

使用Laya引擎开发微信小游戏

使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏。

4654
来自专栏媒矿工厂

编码,打包,CDN交付和视频播放器端的延迟优化

在本系列上一篇文章《定义和测量延迟》中,介绍了为什么延迟是OTT传输的一个问题以及如何测量端到端延迟中不同传输步骤所占的延迟比重。 本文接下来介绍可能的延迟优化...

1124
来自专栏拂晓风起

Flex 4 NativeWindow 中添加Flex组件(问题很多,尚不完善)

1034

扫码关注云+社区