Question

我正在开发一个双列HTML电子邮件设计，并使用侧边栏样式作为基础（在此处找到：http://zurb.com/ink/templates.php）。我的问题是，当右侧的内容结束时，我无法找到使文本列扩展为全宽的方法。到目前为止，无论我做什么，一旦侧边栏的东西结束，我最终会在左边的一个巨大的文本列和右边的空白区域。如何在左侧栏栏下方将左栏扩展为完整？显然它是一个响应式模板，所有CSS都需要内联（因为Gmail糟透了，不会阅读<style>标签）

非常感谢任何帮助！

Answer 1

没有办法完全按照你的要求进行操作，我假设它正在扩展包含文本的<td>，因此文本会在侧边栏停止后流畅地流入自由空间。 <td>列在每一行中的宽度始终相同，除非您在其上设置colspan（html）属性。因此，您必须在td上使用colspan=2创建一个新行，并尽可能将文本拆分为侧边栏结束的位置。

Answer 2

理论上，下面的代码可以工作。不需要内联CSS。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="left" valign="top">
        <table width="70" align="right" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td bgcolor="#00CCCC">
                    <br>
                    <strong>Sidebar</strong>
                    <br>
                    <br>
                </td>
            </tr>
        </table>
        Elit wayfarers organic single-origin coffee pour-over tote bag. Sustainable Vice blog tattooed, fap twee ea church-key 3 wolf moon quinoa nisi Banksy hashtag. High Life biodiesel sustainable fanny pack. Pop-up meggings photo booth master cleanse in, readymade Echo Park laboris wayfarers cardigan pickled chillwave quis yr. Gastropub pug farm-to-table slow-carb, nostrud Cosby sweater magna kitsch officia gluten-free shabby chic voluptate cardigan actually. Culpa keytar whatever aliqua nisi Neutra. Messenger bag aesthetic asymmetrical, mumblecore disrupt chillwave swag.
        <br><br>
        Austin et street art, semiotics salvia nisi non velit fugiat cornhole laborum freegan polaroid. Trust fund bicycle rights Bushwick, adipisicing twee meh aliquip hoodie irony. Consectetur gastropub flexitarian, art party id Marfa meggings blog freegan banjo chillwave sunt gentrify post-ironic American Apparel. Biodiesel PBR&B swag tote bag stumptown exercitation Tonx, shabby chic consectetur locavore Godard quis. Occaecat VHS Helvetica pop-up synth, accusamus Pitchfork. Chia elit et nihil, yr literally roof party Odd Future PBR&B sartorial duis synth reprehenderit chillwave. Banksy jean shorts chillwave, seitan ex Echo Park PBR Pinterest sriracha forage lo-fi asymmetrical.
    </td>
</tr>
</table>

如何在HTML电子邮件中创建可扩展列？

2 个答案: