Кнопка Zurb Ink не соответствует 2 столбцам на панели

При создании электронной почты в формате 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>

html css html-email zurb-foundation zurb-ink
person dman    schedule 28.02.2014    source источник
comment
В вашей таблице с двумя столбцами нет <tr> или <td>.   -  person John    schedule 28.02.2014

Ответы (2)


arrow_upward
1
arrow_downward

Я считаю, что подстолбцы - это то, что вы ищете. Из документации Zurb:

Хотя сетка Ink не может быть вложена, как ее аналог Foundation, 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/

person Galen Gidman    schedule 28.02.2014
comment
Нет, он ищет таблицу внутри класса панели, а не только подстолбцы - person llioor; 10.02.2016

arrow_upward
1
arrow_downward

Из документов:

Чтобы создать кнопки, которые отлично смотрятся в большинстве клиентов, создайте таблицу класса button, чтобы обернуть тег <a>. Кнопки по умолчанию расширяются на всю ширину своего контейнера, поэтому, если вы не хотите, чтобы они расширялись полностью, рассмотрите возможность размещения их во вложенной сетке или блочном элементе сетки.

Это означает, что вы можете поместить таблицу кнопок внутри элемента подсетки.

person llioor    schedule 10.02.2016