Какая альтернатива float для почтовых клиентов?
Вот что я использую float.И я хочу, чтобы альтернативный подход точно сохранял поведение.
html
<div class="container">
<div class="leftText">
left text
</div>
<div class="rightText">
right text right text
</div>
</div>
css
.leftText {
display: inline-block;
border: 1px solid green;
background: yellow;
}
.rightText {
display: inline-block;
float: right;
border: 1px solid green;
background: cyan;
}
jsfiddle
Вот что я пытался сделать, используя доступные во всех почтовых клиентах text-align и calc (calc доступно в соответствии с this ).
html
<div class="container">
<div class="leftText">
left text
</div>
<div class="rightText">
right text right text
</div>
</div>
css
.leftText {
display: inline-block;
border: 1px solid green;
background: yellow;
}
.rightText {
display: inline-block;
text-align: right;
width: calc(100% - 58px);
min-width: 122px;
border: 1px solid green;
background: cyan;
}
jsfiddle
Этот подход не работает таким образом, что, когда правильный текст перемещается на собственную строку, слова неперенос из-за установки min-width.Если бы было возможно добавить перенос слов после того, как правильный текст переместился на собственную строку, то решение было бы тем, что я искал.
Согласно это Outlook не поддерживает display: table и послетестирование оказывается правдой.Поэтому, пожалуйста, не советуйте мне использовать display: table или аналогичный дисплей (например, inline-table, table-row, table-column, table-cell и т. Д.).
