Я потратил часы, пытаясь создать шаблон электронной почты, который активно работает. Я пытаюсь разместить DIVs рядом друг с другом в BODY электронного письма с подтверждением, которое должно быть отправлено с моего сайта. Таким образом, в результате электронной почты у меня есть это:Как разместить divs рядом друг с другом в почтовом теле?
<div class="view-content" style="margin-bottom: 20px;">
<h3 style="margin: 0px;font-size: 14px;background-color: #eff1f7;border-top: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;padding: 15px 15px 0 15px;">TESTO 925 - temperaturmätare, typ K, radio, larm,</h3>
<div class="views-responsive-grid views-responsive-grid-horizontal views-columns-3 checkout">
<div class="views-row views-row-1 views-row-first" style="background-color: #eff1f7;border-bottom: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;margin: 0px;">
<div class="views-column views-column-1 views-column-first" style="color: #000;">
<div class="views-field views-field-line-item-label" style="float: left;"> <span class="views-label views-label-line-item-label" style="font-weight: bold;font-size: 13px;">Artikelnr: </span> <div class="field-content artikelnr">0560 9250</div> </div>
<div class="views-field views-field-commerce-unit-price" style="float: left;"> <span class="views-label views-label-commerce-unit-price" style="font-weight: bold;font-size: 13px;">Pris: </span> <div class="field-content price">995 kr</div> </div>
<div class="views-field views-field-quantity" style="float: left;"> <span class="views-label views-label-quantity" style="font-weight: bold;font-size: 13px;">Antal: </span> <div class="field-content antal">1</div> </div>
<div class="views-field views-field-commerce-total" style="float: left;"> <span class="views-label views-label-commerce-total" style="font-weight: bold;font-size: 13px;">Summa: </span> <div class="field-content price">995 kr</div> </div> </div>
</div>
</div>
</div>
Как вы можете видеть, что я пытаюсь использовать float:left здесь, но я также попытался использовать display:table в контейнере (.view-content) и display:table-row и display:table-cell соответственно в других DIVs , Другие вещи, которые я пробовал, это использовать display:block и display:inline-block ... без везения. Так что я делаю неправильно здесь? Почему DIVS с полем класса выше выше отказываются позиционировать себя рядом друг с другом? Есть причины, по которым я не могу использовать простую таблицу, немного длинную для объяснения здесь.
UPD: Хорошо, так что я, наконец, придется отказаться от этого и использовать простую таблицу подход из-за отсутствия поддержки позиционирования ДИВ в популярных почтовых клиентов, как Outlook 2013 ...
скрипка или некоторый код кода CSS могут помочь понять больше :) – semuzaboi
С созданием шаблонов электронной почты HTML вы хотите использовать таблицы, а не div. См. Этот учебник: https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770 –
Да, я вижу, что сейчас нет поддержки позиционирования div в Outlook 2010/13 и т. Д. Мне придется пересмотреть мой подход. Большое спасибо в любом случае :-). – TBJ