dir 태그가 모바일에서 콘텐츠를 밀어 넣습니다.

Question

모바일에 쌓아 올 (오른쪽에서 왼쪽) 데스크톱에서 나란히있는 콘텐츠를 가져 오려면 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; 
} 

모든 바탕 화면에 잘 작동하지만 모바일보기로 전환 할 때 이미지가 성장하고, 텍스트가 바로 옆에 작은 칼럼에 밀려 도착 및 문제를 파악할 수없는 것 같습니다.

도움이 될 것입니다. 다음

Answer 1

업데이트 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>