基金会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