2016-09-16 33 views
0

我正在使用dir標籤在桌面上並排放置內容(左上角)在移動設備中。但它似乎是將文本推向一邊,而不是將其包裹在圖像下面。dir標籤將內容推送到移動端

<table class="deviceWidth" dir="rtl" width="100%" 
cellpadding="0" cellspacing="0" border="0" style="border-collapse: 
collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; "> 

    <tr> 
    <td width="50%" dir="ltr" align="right" class="full"> 
     <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;"> 
     <a href="#"><img src="image.jpg" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
     </p>     
    </td> 
    <td width="50%" dir="ltr" align="left" class="full" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#000000;line-height:18px; padding: 5px;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.      
    </td> 
    </tr> 
</table> 

隨着:

@media only screen and (max-width:620px) { 
table[id=container] .full { 
display:block !important; 
width:100% !important; 
} 

一切正常的桌面,但是當我切換到移動視圖圖像的增長,並在文本剛剛被拉高到一個較小的柱側面和我似乎無法弄清楚這個問題。

任何幫助將不勝感激!

回答

0

更新HTML

現場演示小提琴Here和調整輸出,然後檢查它的小提琴。

@media only screen and (max-width:620px) { 
 
table[id=container] .full { 
 
display:block !important; 
 
width:100% !important; 
 
}
<table class="deviceWidth" dir="rtl" width="100%" 
 
cellpadding="0" cellspacing="0" border="0" style="border-collapse: 
 
collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; "> 
 

 
    <tr> 
 
    <td width="50%" dir="ltr" align="right" class="full" style="position:relative"> 
 
     <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0; position:absolute;top:0;right:0;"> 
 
     <a href="#"><img src="image.jpg" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
 
     </p>     
 
    </td> 
 
    <td width="50%" dir="ltr" align="left" class="full" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#000000;line-height:18px; padding: 5px;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.      
 
    </td> 
 
    </tr> 
 
</table>