时间戳

首页 > 解决方案 > 如何响应地均匀分布文本？

html - 如何响应地均匀分布文本？

问题描述

我今天在工作中遇到问题，我正在尝试将这 3 个文本框响应式地分布在屏幕上，一个在左边，可能有一点填充物从左边推开，一个在中间，一个在右边，还有一个填充从右侧推开。

我使用了很多解决方案，每次它在我的屏幕上运行时都不起作用的原因是因为它通过 IE HTML 然后显示在电子邮件上，所以它必须经过特定的转换。

我有一种感觉，这也可能是 HTML 的旧版本/过时版本，因为一切都是纯粹基于 HTML 的。

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

这是文本框，我会尝试你们提出/推荐的内容，谢谢。

标签： htmlcssemail

解决方案

直到今天，电子邮件客户端都没有普遍支持 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>

推荐阅读