闲丫头

您现在的位置是:首页 > WordPress建站 > WordPress基础教程

WordPress基础教程

WordPress如何用两栏table放「左字右图」,让在手机时可变成流动式「上字下图」的直向排列

闲丫头 2019-12-16 WordPress基础教程
如果有安装强化版文字编辑器「TinyMCE Advanced」的话,就有内建点选插入表格的功能,所以在写文章时临时想要用「左字右图」的方式来快速排版时,就直接插入一个2栏的表格即可。
1、如果有安装强化版文字编辑器「TinyMCE Advanced」的话,就有内建点选插入表格的功能,所以在写文章时临时想要用「左字右图」的方式来快速排版时,就直接插入一个2栏的表格即可。

▼以下这「左字右图」就是用直接一键插入表格来做的。

2、准备一段CSS代码,并配合【WP Add Custom CSS】插件来全站套用。

代码参考如下:

rwd-layout {
border:0px!important;
}
.rwd-layout th,.rwd-layout td{
border-width: 0 0 1px 0!important;
}

@media(max-width:480px){

.rwd-layout td{
display:block;
width: 100%!important;
border:0px!important;
}
.rwd-layout th{
border-width: 0 0 1px 0!important;
}
}

3、以后只要有插入表格,就替表格加上「class="rwd-layout"」属性即可。

4、在手机画面如下:

文章评论