Теги Div не отображаются в html

Question

Теги Div не отображаются в html

0

Я пытаюсь создать информационный бюллетень с использованием тегов для выравнивания данных. Я создал следующий код:

<div style="width:410px; height:207px; background-color:#ffffff; float:left;">
    <p style="text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000; padding:0 10px 0 0;">
        <a href="hyperlink">
            <img align="left" src="image.png" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;">
        </a>
        <a href="hyperlink" style="text-decoration:none; color:#00add0; font-weight:600;">text</a>
    </p>
</div>

Тем не менее, когда я рассматриваю этот дизайн в почте Outlook, второй не опускается ниже первого, а толпы - в первый вместе с третьим.

Любые мысли о том, что я могу попытаться сделать? Благодарю!

О.Б.

user3103389 15 дек. 2013, в 02:05

Источник

0

Не решение, но вы забыли самостоятельно закрыть элемент img, который может вызвать ошибки при рендеринге HTML. Он должен заканчиваться на />, а не>.
WP_ 15 дек. 2013, в 00:59
0

также я не думаю, что вам нужно указывать ширину изображения на двух разных языках, вам, вероятно, стоит придерживаться описания HTML. также вы можете рассмотреть возможность создания простого раздела стилей вместо элемента, например <style> P.1 {text-align: left; font-family: Arial, Sans-serif; ...} P.2 {... } используйте # для использования id = "". для КЛАССА = "" </ style>
CMS_95 15 дек. 2013, в 02:38
0

@CS_STEM Стили разрываются во многих электронных письмах. Чтобы получить согласованные результаты, вы должны использовать встроенные стили в электронных письмах.
Matthew Johnson 15 дек. 2013, в 05:38
0

Я этого не знал, спасибо.
CMS_95 15 дек. 2013, в 18:28

Показать ещё 2 комментария

Теги:

html

5 ответов

Ещё вопросы

Не решение, но вы забыли самостоятельно закрыть элемент img, который может вызвать ошибки при рендеринге HTML. Он должен заканчиваться на />, а не>.
также я не думаю, что вам нужно указывать ширину изображения на двух разных языках, вам, вероятно, стоит придерживаться описания HTML. также вы можете рассмотреть возможность создания простого раздела стилей вместо элемента, например <style> P.1 {text-align: left; font-family: Arial, Sans-serif; ...} P.2 {... } используйте # для использования id = "". для КЛАССА = "" </ style>
@CS_STEM Стили разрываются во многих электронных письмах. Чтобы получить согласованные результаты, вы должны использовать встроенные стили в электронных письмах.

S.Yavari · Answer 1 · 2013-12-15T04-36-00.000Z

просто удалите float:left; из стиля div

Dawson · Answer 2 · 2013-12-15T03-23-00.000Z

Клиенты электронной почты, похоже, предпочитают таблицы для div, но divs не обязательно "злые" в электронных письмах. Вы просто не можете ожидать, что движок HTML-рендеринга Outlook будет вести себя как Chrome или FireFox. Итак... код для наименее общего достоинства, не так ли?

<table cellpadding="0" cellspacing="0">
    <tr>
        <td style="width:410px; height:207px; padding:0; margin:0; background-color:#efefef; float:left; text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000">
            <a href="hyperlink" style="text-decoration:none; color:#00add0; font-weight:600; padding-left:10px"><img align="left" src="http://lorempixel.com/output/abstract-h-g-190-207-10.jpg" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;"/>text</a>
        </td>
    </tr>
</table>

Вероятно, ваш код был близок к работе. Подумайте о <td> как о <p>, а <table> - в <div>. В некотором смысле, я думаю, что разметка по электронной почте проще (множество ограничений и меньше вариантов - заставляет ее сохранять ее просто).

Поскольку обе ссылки были в одном месте, я завернул ваш <img> внутри <a>, что является законным.

Думаю, это должно закрыть вас.

http://jsfiddle.net/KhE4B/

arieljuod · Answer 3 · 2013-12-15T02-55-00.000Z

Divs для электронных писем является выбором baaaad, почтовые клиенты обычно игнорируют некоторые свойства css, чтобы защитить его пользователей, вы должны использовать таблицы (да, это грустно, но верно) и делать простые проекты для электронных писем. Я полагаю, что плагин игнорируется почтовым клиентом.

Таблицы - способ пойти с электронными письмами. Вы должны кодировать, как будто это 90-е годы.

Dan · Answer 4 · 2013-12-14T22-40-00.000Z

Вы можете добавить следующий код CSS в свой элемент div.

clear: both;

Вот JSFiddle с и без ясно: то и другое;

Собственно, проигнорируйте это. Удаление float: left; из всех элементов div будет сортировать трюк - JSFiddle

CRABOLO · Answer 5 · 2013-12-14T21-57-00.000Z

Добавьте теги br, где вы хотите, чтобы он начинался с новой строки. <br/>, вы даже можете сделать <br/><br/> столько раз, сколько хотите дать ему дополнительное пространство.

<div style="width:410px; height:207px; background-color:#ffffff; float:left;">
  <p style="text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000; padding:0 10px 0 0;">
    <a href="hyperlink"><br />
      <img align="left" src="image.png" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;"></a><br />
    <a href="hyperlink" style="text-decoration:none; color:#00add0; font-weight:600;">text</a></p>
</div>