필자가 작성한 INK HTML 뉴스 레터에서 필자는 6 개의 컬럼으로 이루어진 2 개의 테이블로 나뉘어 진 행을 가지고 있습니다. 왼쪽 표는 텍스트이고 오른쪽은 이미지입니다. 전자 메일을 모바일에서 읽을 때 이미지가 먼저 나타나고 텍스트가 이미지 아래에 나타나기를 바랍니다. Zurb Foundation (사이트 용)에서는 푸시 앤 풀을 사용하여 수행 할 수 있습니다. INK에서 같은 효과를 얻을 수있는 방법이 있습니까? INK는 테이블을 사용하기 때문에 문제는 테이블 셀을 교환하는 것입니다. 재단의 코드를 사용하여 인라인 CSS를 만들려고했으나 셀 내용을 오른쪽 또는 왼쪽으로 이동 (예상)Zull INPUT 테이블 풀다운 테이블
Zurb Ink에는 현재 푸시/풀 기능이 없으므로 그 기능에 가장 가까운 것은 visibility classes을 사용하는 것입니다.
a solution을 사용하여이 기능을 직접 추가 할 수 있습니다. 잠시 후에 생각났습니다.
트릭은 열 표시 방법을 제어하는 dir 매개 변수입니다.
<table class="row" dir="rtl" >
<tr>
<td class="wrapper last">
<table class="six columns">
<tr>
<td dir="ltr" align="right">
[RIGHT CONTENT HERE]
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper" dir="ltr" align="left">
<table class="six columns">
<tr>
<td >
[LEFT CONTENT HERE]
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
데스크톱 이메일 클라이언트의 경우 오른쪽에 첫 번째 열과 왼쪽에 두 번째 열이 표시됩니다. 반응 형 전자 메일을 지원하는 모바일 클라이언트에서 첫 번째 열은 두 번째 열 위에 표시됩니다.
