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>

它会正确对齐。

此外，您可以从“medium-6 large-6”列中删除此类，因为基础是移动优先框架，您只需定义“small-6”列，此规则将应用于其他断点。

这是小提琴： jsFiddle

基础Zurb网格内容堆叠

1 个答案: