Je suis chargé de créer un modèle et du courrier électronique HTML. Nos designers (Dieu bénissent-eux) ont eu la bonne idée de créer un fragment où du côté gauche, nous avons du texte, et sur le côté droit a une image, à peu près à ceci:
Le concept décrit fonctionne, mais pas dans Outlook, où les tables sont indiquées sous l'autre, car elles ignorent l'affichage https://codepen.io/hergi/pen/yzpbkzx?éditors=1100 P>
Sur mobile, ils veulent que le texte soit après l'image, mais comment puis-je y parvenir? J'ai proposé d'utiliser 2 balisages, mais le client ne le veut pas. Ma deuxième pensée utilisait l'attribut CSS direction code>: le réglage sur RTL et sur mobile le retourner sur LTR, changeez donc la commande. Mais cela échoue, car les 2 éléments côtiers sont des tables à côté de l'autre. Outlook ignore Affichage: Inline code> sur les tables, afin de les faire côte à côte, je dois utiliser align = "gauche" code>. Mais Align Gauche Kinda écrase mon direction: rtl code> attribut. N'importe qui a eu une idée? : Inline P> P> P> P> (Étant donné que mes composants prennent la moitié de l'espace dans les clients> 750px largeur et 100% de l'espace dans les clients direction: RTL code> ne sera pas Changez l'ordre des éléments empilés sur les autres, uniquement à côté de l'autre) p> <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>
3 Réponses :
Peut-être essayez peut-être flexbox .
vous pourrait se débarrasser de la "table" au fait, en utilisant flexbox.
Flex ne fonctionnera pas avec Outlook ou la plupart des plates-formes de messagerie.
AGH, je ne savais pas. Pardon :(
Ce qu'a dit Gwally, mais merci pour votre contribution - sur les clients "non muet", cela fonctionne comme un charme. Comme, par exemple, Outlook pour Mac lol. ironiquement, le meilleur mailClient MS a jamais publié
J'ai eu un problème similaire où je devais m'empiler dans l'ordre inverse. J'ai également eu des problèmes avec direction: rtl; code>. Ma solution consistait à ignorer le CSS et à appliquer le RTL directement à la table. <table>
<tr>
<td dir="ltr">A</td>
<td dir="rtl">B</td>
</tr>
</table>
résolu fort> J'espère que cela aidera tout le monde à avoir le même problème à l'avenir. Donc, l'idée générale d'utiliser Le hack avec direction m'a permis de changer la commande d'abord, du texte seconde , qui est également la façon dont la vue mobile est censée être. p> puis réglez les deux tables elles-mêmes sur pour définir les tables d'une ligne (faites-les en ligne) dans Outlook, ajoutez l'attribut HTML direction: RTL; code> s'est révélée être la bonne idée. P> dir = "ltr" code> et style = "Direction: ltr; " code>, leur contenu sera donc présenté dans le style de gauche à droite au style de droite. p> Align = "Droite" Code>. P> <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>