Comment empiler des colonnes en responsive modèle d'e-mail?
Je vais essayer de l'avoir pour les colonnes à afficher côte à côte sur de grands écrans et afficher empilés les uns sur les autres sur des appareils mobiles, mais j'ai été incapable de le faire à présent, j'ai essayé de suivre la même approche ZURB utilisés sur leurs modèles où ils ont ajouté à div
s flotté et en désactivant le flotteur sur de petits appareils comme:
<table>
<tr>
<td>
<div class="column" style="float: left; width: 300px;">
<!-- content -->
</div>
<div class="column" style="float: left; width: 300px;">
<!-- content -->
</div>
</td>
<tr>
</table>
Et dans mon <style>
tag:
@media screen and (max-device-width: 600px) {
.column {
width: auto !important;
float: none !important;
display: block !important;
}
}
Il semble bien, presque partout, mais outlook.com apparemment, les bandes de flotteurs de la css de sorte qu'ils ne ressemblent pas à côté.
Quelque chose que j'ai essayé de faire a été en utilisant des cellules de tableau au lieu de div
s comme:
<table>
<tr>
<td width="300" align="left" class="column">
<!-- content -->
</td>
<td width="300" align="left" class="column">
<!-- content -->
</td>
<tr>
</table>
Gardant les mêmes classes CSS mais même si cela résout le problème dans les clients de bureau il semble côte à côte sur les appareils iOS (comme si le display: block
n'est pas appliqué à la td
s)
Quelqu'un a une idée?
OriginalL'auteur Javier Villanueva | 2013-06-01
Vous devez vous connecter pour publier un commentaire.
Vous devez passer à l'aide de tables au lieu de div. Jetez un oeil à la suite de balisage HTML pour la référence. Aussi, ce guide sera très utile: http://www.campaignmonitor.com/guides/mobile/
td
éléments au lieuOriginalL'auteur hmhcreative