Zurb墨水按钮不尊重面板中的2列 [英] Zurb Ink Button Not Respecting 2 Columns in Panel
问题描述
在创建HTML电子邮件时,我使用的是Zurb Ink框架。
In creating a HTML email, I am using Zurb Ink framework.
我有一个面板,我想在面板内部有几个水平线的显示。例如:
I have a panel that I want to have a several horizontal lines of display inside of the panel. For instance:
Panel:
[assigned] 12/12/2013 12:14:00 Reboot Server
[unassigned] 12/12/2013 15:00:00 Shutdown Server
在此代码中,我已在面板中成功创建了面板和按钮。但是,我不能得到按钮只采取两列。
In this code I have I created the panel and the button successfully inside the panel. However, I can not get the button to take only two columns. How can I make the button take only 2 columns and then have text after the button?
<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文档:
I believe sub-columns are what you're looking for. From the Zurb documentation:
虽然Ink网格不能像Foundation基础对象那样嵌套,但Ink提供了一个可嵌套子网格当一个网格只是不够。通过将.sub-columns类(以及与主网格相同的编号类)应用于.columns表下的标记,您可以将.columns表细分为子列。
While the Ink grid can't be nested like its Foundation counterpart, Ink does provide a nestable sub-grid for when one grid just isn't enough. By applying a .sub-columns class (as well as a numbered class, same as the primary grid) to a tag underneath a .columns table, you can sub-divide the .columns table into sub-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/
这篇关于Zurb墨水按钮不尊重面板中的2列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!