Как равномерно распределить текст ответно?

Question 1

У меня сегодня проблемы на работе, и я пытаюсь быстро распределить эти 3 текстовых поля по экрану, одно слева, может быть, с небольшим отступом слева, одно в центре, другое справа, а также с прокладка отталкивается от правой.

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

У меня есть ощущение, что это также может быть старая / устаревшая версия HTML, поскольку все основано исключительно на HTML.

        <div class="awards" style="display: flex; float: float;">
        <div>silver</div>
        <div>gold</div>
        <div>platinum</div>
    </div>

Вот текстовые поля, я попробую то, что вы, ребята, придумали / порекомендуете, спасибо.

html css email

0

Daniel 20 Дек 2019 в 18:55

Answer

Даже по сей день поддержка CSS Flexbox не всегда поддерживается во всех почтовых клиентах, и наиболее надежным методом является таблица из трех столбцов с шириной 33% в ячейках.

<style>
.table-awards {
    width: 100%;
}

.table-awards td {
    border: 1px solid black;
    width: 33%;
}

.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<table class="table-awards" style="width: 100%">
  <tr>
    <td class="gold" style="padding-left: 10px;">Silver</td>
    <td class="silver" style="padding: 0 10px;">Gold</td>
    <td class="platinum" style="padding-right: 10px;">Platinum</td>
  </td>
</table>

Если бы вы собирались сделать это с помощью flex, это было бы что-то вроде:

<style>
.awards {
    display: flex; 
    justify-content:space-evenly;
}
.awards > div {
    border: 1px solid black;
    flex: 1;
}

.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<div class="awards">
    <div class="gold" style="margin-left: 10px;">silver</div>
    <div class="silver" style="margin: 0 10px;">gold</div>
    <div class="platinum" style="margin-right: 10px;">platinum</div>
</div>

1

Mike G 20 Дек 2019 в 16:21

Question 2

Даже по сей день поддержка CSS Flexbox не всегда поддерживается во всех почтовых клиентах, и наиболее надежным методом является таблица из трех столбцов с шириной 33% в ячейках.

<style>
.table-awards {
    width: 100%;
}

.table-awards td {
    border: 1px solid black;
    width: 33%;
}

.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<table class="table-awards" style="width: 100%">
  <tr>
    <td class="gold" style="padding-left: 10px;">Silver</td>
    <td class="silver" style="padding: 0 10px;">Gold</td>
    <td class="platinum" style="padding-right: 10px;">Platinum</td>
  </td>
</table>

Если бы вы собирались сделать это с помощью flex, это было бы что-то вроде:

<style>
.awards {
    display: flex; 
    justify-content:space-evenly;
}
.awards > div {
    border: 1px solid black;
    flex: 1;
}

.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<div class="awards">
    <div class="gold" style="margin-left: 10px;">silver</div>
    <div class="silver" style="margin: 0 10px;">gold</div>
    <div class="platinum" style="margin-right: 10px;">platinum</div>
</div>

1

Mike G 20 Дек 2019 в 16:21

Как равномерно распределить текст ответно?

1 ответ

Похожие вопросы

Новые вопросы

html