Zurb 잉크 버튼이 패널의 2 열을 고려하지 않습니다.

Question

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> 

Answer 1

나는 하위 열이 당신이 찾고있는 것이라고 생각한다. Zirc 문서에서 :

Ink 그리드는 Foundation과 마찬가지로 중첩 될 수 없지만 Ink는 하나의 그리드가 충분하지 않을 때 중첩 가능한 하위 그리드를 제공합니다. .columns 테이블 아래의 태그에 .sub-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/

Answer 2

:

는, 대부분의 클라이언트에서 멋지게 버튼을 만들에 클래스 button의 테이블을 만들려면 <a> 태그를 감 쌉니다. 버튼은 기본적으로 해당 컨테이너의 전체 너비가 으로 확장되므로 모두 을 확장하지 않으려면 하위 그리드 또는 블록 격자 요소에 배치하는 것이 좋습니다.

그것은 당신이 아 격자 요소