在创建HTML电子邮件时,我使用的是Zurb Ink框架。
我有一个面板,我想在面板内部有几条水平显示线。例如:
Panel:
[assigned] 12/12/2013 12:14:00 Reboot Server
[unassigned] 12/12/2013 15:00:00 Shutdown Server
其中有一个用于分配/未分配和文本跟随的按钮。
在此代码中,我在面板中成功创建了面板和按钮。但是,我无法让按钮只取两列。如何使按钮仅占 2 列,然后在按钮后显示文本?
<table class="row callout">
<tr>
<td>
<table class="twelve columns">
<tr>
<td class="panel" style="background: #ECF8FF; border-color: #b9e5ff">
<table class="two columns">
<table class="tiny-button small radius alert">
<tr>
<td>
unassigned
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
子列就是你要找的。来自 Zurb 文档:
虽然 Ink 网格不能像其基础网格那样嵌套,但 Ink 确实提供了一个可嵌套的子网格,用于当一个网格不够时。通过将 .sub-columns 类(以及与主网格相同的编号类)应用于 .columns 表下的标记,您可以将 .columns 表细分为子列。
标记
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="four sub-columns">
<table class="button">
<tr>
<td> <a href="#">Assigned</a>
</td>
</tr>
</table>
</td>
<td class="eight sub-columns last">2/12/2013 12:14:00 Reboot Server</td>
<td class="expander"></td>
</tr>
<tr>
<td class="four sub-columns">
<table class="button">
<tr>
<td> <a href="#">Unassigned</a>
</td>
</tr>
</table>
</td>
<td class="eight sub-columns last">12/12/2013 15:00:00 Shutdown Server</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
小提琴:http://jsfiddle.net/galengidman/MPQ38/1/
来自文档:
若要创建在大多数客户端中看起来很棒的按钮,请创建一个 类
button
来包装您的<a>
标签。按钮展开到全宽 默认情况下是他们的容器,所以如果你不希望他们展开所有 方式,考虑将它们放置在子网格或块网格元素中。
这意味着您可以将按钮表放在子网格元素中