Блог

Я пытаюсь поместить два изображения друг на друга в HTML-формате электронного письма, но это не удается. Он отлично отображается в обычном HTML, но когда дело доходит до макета электронной почты, он сворачивается.

код

 <td className="icon">
   <img class="block" src='./img/b.png' />
   <img src='./img/a.png' />
</td>

<style>
.block {
  margin-bottom: -15px;
  margin-left: -40px;
}
</style>     
 

margin не работает полностью.

У вас есть какие-либо идеи в MAIL HTML?

идеально:

проблема:

Я не уверен, но я думаю, что ваш «td» с классом icon должен иметь большую ширину в вашем макете. Таким образом, поле -40px работает неправильно. Я думаю, вы можете попробовать жестко задать ширину значка, увеличить отрицательное значение поля или позиционировать свои изображения как абсолютные в вашем контейнере.

Я также оставляю этот рисунок «логотип» с помощью CSS ниже. Я надеюсь, что это может вам немного помочь. (Вы можете изменить ширину и высоту контейнера для ваших нужд).

HTML

 <div class="circles-container">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
</div>
 

CSS

 .circles-container{
position: relative;
display: flex;
width: 200px;
height: 100px;
background-color: transparent;
}

.circle{      
position: absolute;
top:0;
width: 50%;
height: 100%;
border-radius: 50%;
transform: translateX(-50%);
}

.circle1{
left: 33%;
background-color: #3484b9;
}

.circle2{
left: 66%;
background-color: #ffd61e;
}