布局响应式方法：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 系列知识点

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