Проблемы с выравниванием изображений для электронной почты HTML - PullRequest
Новая
       7

Проблемы с выравниванием изображений для электронной почты HTML

1 голос
/ 23 февраля 2020

Новое в кодировании и обучении созданию HTML электронной почты. Я выбрал случайное письмо и пытаюсь его скопировать.

Я пытаюсь выровнять изображение Google рядом с изображением в магазине Apple Play, чтобы значки социальных сетей были слева.

Я искал W3, Google и переполнение стека. Я пытался добавить отступы.

Спасибо за вашу помощь. 

                         <tr>
                            <td>
                                <img src="/img/applestorelogo.png" width="auto" height="24" style=" display: inline-block;" alt="applestorelogo"/>
                            </td>
                            <td>
                                <img src="/img/googlestore.png" width="auto" height="24" alt="googlestore"/>
                            </td>
                            <td><img src="/img/fb.png" width="auto" height="24"  alt="facebook"/>
                            </td>
                            <td><img src="/img/IG.png" width="auto" height="24" alt="instagram"/>
                            </td>
                            <td><img src="/img/twitter.png" width="auto" height="24" alt="twitter"/>
                            </td>
                        </tr>

Ниже изображение

Ответы [ 2 ]

0 голосов
/ 23 февраля 2020 
    <tr style="display: inline-block;">
            <td>
                <img style="border: 2px red solid" src="/img/applestorelogo.png" alt="applestorelogo"/>
            </td>
            <td>
             <img style="border: 2px red solid" src="/img/googlestore.png" alt="googlestore"/>
            </td>
            <td>
                <img style="border: 2px red solid" src="/img/fb.png" alt="facebook"/>
            </td>
            <td>
                <img style="border: 2px red solid" src="/img/IG.png" alt="instagram"/>
            </td>
            <td>
                <img style="border: 2px red solid" src="/img/twitter.png" alt="twitter"/>
            </td>
        </tr>

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

0 голосов
/ 23 февраля 2020

На мой взгляд, вы должны использовать только три <td>.

Ниже приведена идея для вашего сценария. Возможно, вам придется изменить ширину в соответствии с вашим макетом: 

<table border="1" style="width:50%">
<tr>
    <td style="text-align: center; width: 5%;">
        <img src="/img/applestorelogo.png" width="auto" height="24" alt="applestorelogo"/>
    </td>
    <td style="text-align: center;width: 5%;">
        <img src="/img/googlestore.png" width="auto" height="24" alt="googlestore"/>
    </td>
    <td style="text-align: right;">
        <img src="/img/fb.png" width="auto" height="24"  alt="facebook"/>  
        <img src="/img/IG.png" width="auto" height="24" alt="instagram"/>  
        <img src="/img/twitter.png" width="auto" height="24" alt="twitter"/>
    </td>
</tr>
</table>
...