Responsive: Allowing Text To Flow Around Images - Litmus

Trang chủ » Html Wrap Text Around Image With Padding » Responsive: Allowing Text To Flow Around Images - Litmus

Có thể bạn quan tâm

Hello Mike. The basis of what you're trying to do is to float the image on the right of its adjacent text. We could use the CSS float:right; property, but this is not supported by Outlook 2007/2010/2013. So we'll use the old align="right" attribute instead, which works perfectly on <img> and <table> tags. So in its most simple version, your code could look something like this :

<div style="Margin:20px;"> <img src="http://i.imgur.com/6bkt2Qk.gif" align="right" width="140" height="140" border="0" style="Margin:0 0 20px 20px; background:#E79851;" /> <p style="Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. </p> </div>

While Outlook supports the align="right" attribute on an <img>, it doesn't actually support the margin property to separate the image from the text. So to have a proper render in Outlook, we can use a <table> around the image, and have a padding on its only <td>. Here's the corresponding code :

<!--[if mso]> <table border="0" cellpadding="0" cellspacing="0" width="160" align="right" style="width:160px;"><tr><td style="padding:0 0 20px 20px;"> <![endif]--> <img src="http://i.imgur.com/6bkt2Qk.gif" align="right" width="140" height="140" border="0" style="Margin:0 0 20px 20px; background:#E79851;" /> <!--[if mso]> </td></tr></table> <![endif]-->

The final step is to make the image stack above the text on mobile. In order to do this, we can use a media query and target our image to remove the float.

<style type="text/css"> @media only screen and (max-width:480px) { img { display:block; float:none; margin:0 auto 20px !important; } } </style>

Here's the full example with code in Litmus Builder.

Reply to Rémi Parmentier

Từ khóa » Html Wrap Text Around Image With Padding