Question

我目前正在尝试编写自适应电子邮件模板，因此仅限于使用html表格和内联css（无需javascript或媒体查询），以便尽可能多地支持电子邮件客户端。

具体来说，我想浮动一些元素（整个表格或内部列），以便它们可以均匀地填充可用宽度，但是当可用宽度不足够大时，它也会下降到行的旁边容纳所有文本。

这是我第一次尝试在可用宽度内均匀分隔元素：http://jsfiddle.net/aerospatiale/noy7ur7a/。

table { 
    width: 100%;
    max-width: 600px;
    background-color: #eeeeee;
    text-align: justify; 
}
table:after {
    display: inline-block !important;
}
table th { 
    vertical-align:top; 
    text-align: center;
    font-weight:normal; 
}

<table align="center">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
        <th>Five</th>
        <th>Six</th>
        <th>Seven</th>
        <th>Eight</th>
        <th>Nine</th>
        <th>Ten</th>
    </tr>
</table>

这是我的第二次尝试，它允许元素在必要时放到下一行，但不能在可用的全宽度内均匀分布元素：http://jsfiddle.net/5qsjn2ys/。

table { 
    width: 100%;
    max-width: 600px;
    background-color: #eeeeee;
    text-align: justify; 
}
table th { 
    display: inline-block !important;
    vertical-align:top; 
    text-align: center;
    font-weight:normal; 
}

<table align="center">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
        <th>Five</th>
        <th>Six</th>
        <th>Seven</th>
        <th>Eight</th>
        <th>Nine</th>
        <th>Ten</th>
    </tr>
</table>

是否可以将这些效果结合起来以均匀分布元素，但是当可用宽度不足时，是否允许它们下降到下一行？

注意：我意识到使用这些元素有点不正统，但它可以解决Android怪癖。

Answer 1

请尝试更改为display:block以获得较低的屏幕尺寸。

http://jsfiddle.net/afelixj/noy7ur7a/2/

Answer 2

你可以用表来做，并且记得把所有内容都设为内联css，因为gmail会删除head-styles。我已经在我做过的一些响应式模板中这样做了。这可以在所有42个最常见的电子邮件/ Web客户端中使用。

演示： https://jsfiddle.net/aerospatiale/noy7ur7a/

<table cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;max-width: 600px;background-color: #eeeeee;">
<tr>
    <td>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    1
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    2
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    3
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    4
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    5
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    6
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    7
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    8
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    9
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    10
                </td>
            </tr>
        </table>
    </td>
</tr>

浮点表元素仅使用html / css

2 个答案: