Столики рядом друг с другом меняйте порядок на мобильных устройствах

Question

Мне поручено создать шаблон для HTML электронной почты. У наших дизайнеров (да благословит их Бог) была прекрасная идея создать фрагмент, где на левой стороне у нас есть текст, а на правой стороне изображение, примерно так:




На мобильном телефоне они хотят, чтобы текст был за изображением, но как мне этого добиться? Я предложил использовать 2 наценки, но клиент этого не хочет. Моя вторая мысль заключалась в том, чтобы использовать атрибут CSS direction: установить его на rtl, а на мобильном устройстве переключить обратно на ltr, поэтому изменил порядок. Но это не удалось, поскольку 2 элемента рядом друг с другом являются таблицами. Outlook игнорирует display:inline для таблиц, поэтому, чтобы сделать их рядом друг с другом, я должен использовать align="left". Но выравнивание по левому краю перезаписывает мой атрибут direction: rtl. Кто-нибудь есть идеи?

описанная концепция работает, но не в перспективе, где таблицы показаны друг под другом, так как он игнорирует display:inline.

(Поскольку мои компоненты принимают до половины пространства в клиентах> шириной 750 пикселей и 100% пространства в клиентах <750 пикселей, мне нужно использовать RTL на рабочем столе и LTR в мобильном. <code>direction:rtl не изменит порядок элементов, накладываемых друг на друга, только рядом друг с другом)

https://codepen.io/hergi/pen/YzPbKzX?editors=1100

<style type="text/css">      
  .wrapper {
    direction: rtl;
  }

  @media (max-width:749px) {
  .wrapper {
    direction: ltr !important;
  }

  }

  @media (min-width:750px) {

  .wrapper {
    direction: rtl !important;
  }
  }

</style>
<div class="wrapper" style="direction: rtl;">
  <table style="display: inline-block;">
    <tr>
      <td>
  <img src="https://kde.org/stuff/clipart/logo/kde-logo-white-blue-rounded-128x128.png" />        
      </td>
    </tr>
  </table>
  <table style="display: inline-block;">
    <tr>
      <td>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Google-Cloud-Storage-Logo.svg/128px-Google-Cloud-Storage-Logo.svg.png" />   
      </td>
    </tr>
  </table>
</div>

Answer 1

У меня была похожая проблема, когда мне пришлось складывать в обратном порядке. Я также столкнулся с проблемами с direction: rtl;. Мое решение состояло в том, чтобы пропустить css и применить rtl непосредственно к таблице.

<table>
  <tr>
    <td dir="ltr">A</td>
    <td dir="rtl">B</td>
  </tr>
</table>

Очевидно, что вы не можете применить выравнивание на уровне <td>, потому что оно будет придерживаться. Но если вы добавите запрос @media, вы можете изменить выравнивание в мобильном телефоне с рабочего стола, и направление не будет мешать.

Удачи.

Удачи.

Answer 2

решено

Я надеюсь, что это поможет любому, кто столкнется с такой же проблемой в будущем. Таким образом, общая идея использования direction:rtl; оказалась правильной.

взлом с направлением позволил мне изменить порядок изображения сначала, текста во-вторых, что также является способом мобильного просмотра. предполагается, что.

, затем установите две таблицы обратно в dir="ltr" и style="direction:ltr;", чтобы их содержимое было представлено в западном стиле слева направо.

для установки таблиц в одну строку (сделайте их встроенными) в outlook добавьте атрибут html align="right".

<table class="wrapper">
  <tr>
    <td dir="rtl" style="direction:rtl;>

      <table align="right" dir="ltr" style="direction:ltr;" class="panel">
        ...appearing right on desktop and on top in mobile
      </table>

      <table align="right" dir="ltr" style="direction:ltr;" class="panel">
        ...appearing left on desktop and bottom on mobile
      </table>

    </td>
  </tr>
</table>

Answer 3

Возможно, попробуйте flexbox .

Кстати, вы можете избавиться от "таблицы", используя flexbox.

https://codepen.io/1019/pen/mdyYbzM

<div class="flex-container">
    <div class="your-text">
        <!-- Here you write the text you want -->
    </div>
    <div class="your-image">
         <!-- Here you add the image you want -->
    </div>
</div>

.flex-container {
    display: flex;
}
@media (max-width:749px) {
    .flex-container {
        flex-direction: column-reverse;
        flex-wrap: wrap;
     }
}

@media (min-width:750px) {
    .flex-container {
        direction: row;
    }
}