基金會Zurb網格內容堆疊

Question

我是新來的地基Zurb，和我有使用它的客戶端，現在我遇到意想不到的事情與我的內容的重疊。

<div class="row"> 
     <div class="small-6 medium-6 large-6 columns"> 
     <p>osidjsaoidusaoidjsaodisjdoisjdosaidjsaoidjsaoidjsaoidjsaoidjsaodijsodijsaodijsaoidjasoidjsaodijsadoijsadoijsdoisajdosaidjfgdpf</p> 
     </div> 
     <div class="small-6 medium-6 large-6 columns"> 
     <p>osidjsaoidusaoidjsaodisjdoisjdosaidjsaoidjsaoidjsaoidjsaoidjsaodijsodijsaodijsaoidjasoidjsaodijsadoijsadoijsdoisajdosaidjfgdpf</p> 
     </div> 
</div> 

這給出了一圈意想不到的內容如下所示：通過這些內容是爲了劃分成兩個單獨的列以前的電網系統

a busy cat http://mdixon94.co.uk/issue.png

只要我敢肯定。他們的東西我失蹤了嗎？我試過clearfixes。

我指的是在圖像底部重疊的文本，以及它與網格重疊的事實。

Answer 1

問題是，有沒有您在<p>標籤輸入文字的任何空白。如果你把實際的內容放在'.columns'裏面，像這樣：

<div class="row"> 
    <div class="small-6 columns"> 
     <img src="kitten.jpg" alt="kitten"/> 
    </div> 
    <div class="small-6 columns"> 
     <img src="kitten.jpg" alt="kitten"/> 
    </div> 
</div> 

它會正確對齊。

您也可以從列刪除類「中6大6」，因爲基礎是移動第一個框架，你可以定義「小6」列，此規則將應用於其他斷點。

這裏是小提琴： jsFiddle