疊加在基礎上的列

我正嘗試使用基金會的電子郵件創建電子郵件模板。疊加在基礎上的列

這是我的代碼片段：

<container class="card-spacer"> 
    <row> 
     <columns small="12" large="6"> 
      <img src="https://b.zmtcdn.com/data/pictures/0/18419730/bb6821c381f4616717178beca3929af7.jpg" style="display: inline-block;" 
     </columns> 
     <columns small="12" large="6"> 
      <p class="zfb-zero-margin-paragraph zfb-primary-text-font text-right">Get more insights and analytics on your ads</p> 
      <p class="zfb-zero-margin-paragraph zfb-body-text-font text-right">View web dashboard for XYZ <a href="www.xyz.com" class="text-color-gold">www.xyz.com</a></p> 
     </columns> 
    </row> 
</container>

我想有圖像和文本，這是在不同的列出現並排側較大的設備（如桌面電子郵件客戶端）並在移動客戶端上彼此堆疊。

有關我如何實現相同的任何見解？

來源

2017-02-23 Kunal Shah

如果沒有給出明確的大小，Flex網格中的列將不會換行 - 這是允許神奇的自動調整大小工作的原因。要在較小的屏幕上創建列堆棧，請手動添加class .small-12。

要從百分比或收縮行爲切換回展開行爲，請使用類.medium-expand或.large-expand。在下面的例子中，列在小屏幕上堆疊，並在大屏幕上變爲均勻寬度。

<div class="row"> 
     <div class="small-12 large-expand columns">One</div> 
     <div class="small-12 large-expand columns">Two</div> 
    </div> 

    For more information check its document 
    http://foundation.zurb.com/sites/docs/flex-grid.html

來源

2017-03-19 12:20:06

疊加在基礎上的列

回答

相關問題