如何用兩欄table放「左字右圖」,讓在手機時可變成流動式「上字下圖」的直向排列

■需求:

想要在一般文章編輯畫面就可以編排出「左字右圖」排版,且不想轉去原始碼直接刻Div,也不想另用Elemenotr來編輯出「左字右圖」的排版,重點是想要在手機介面時「左字右圖」可以自動轉成「上字下圖」的排列

這樣的需求已經是響應式的需求,尤是紅色字那段,所以理論上用Div區塊並浮動,是正規式的作法。

有時候不想用刻div的方式,也懶得另用Elemenotr來編輯,用文字編輯器的插入「表格」來做最快,而且表格在文章寫作時是有框線的,可以很清楚把內容置入想放的格子中

只是想要「手機介面時「左字右圖」可以自動轉成「上字下圖」的排列」就要再下一段CSS來套用,這樣達到上述需求了。

■作法:

1、如果有安裝強化版文字編輯器「TinyMCE Advanced」的話,就有內建點選插入表格的功能,所以在寫文章時臨時想要用「左字右圖」的方式來快速排版時,就直接插入一個2欄的表格即可。

▼以下這「左字右圖」就是用直接一鍵插入表格來做的。

  1. 這裡的編排就是左字右圖的編排了。
  2. 想用時直接一鍵插入表格就行了。
  • 用2欄表格來排版「左字右圖」其實真的很方便。
  • 但等一下還需補上一段CSS語法才能讓手機瀏覽時變成響應式的排列。

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、在手機畫面如下:

Facy

我是Facy,浸淫網路行銷多年,凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客、網站接案製作、架站教學,歡迎找我聊聊。

  • 如果您需要問我相關的話,可以加入FB社團一起交流或寫信給我: smallway.tw@gmail.com
  • 如果您需要更系統性的學習,歡迎參考我的線上課程或家教班
  • 如果您有單一性的問題,例如網站健診、文章問題、做不出的功能,目前接受付費線上家教

發表留言