你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

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

未分类 练小习 1780浏览 0评论

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

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

转载请注明:练小习的前端技术笔记 » 布局响应式方法:dispaly:table-*分组系列

与本文相关的文章

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址