本文介绍了导致div在Pure CSS中堆叠的空白的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用Pure CSS布局网站,我遇到了一个问题。如果嵌套的网格元素之间有空格,它将打破布局并将最后一个div推入下一行。我创建了一个尽可能少的测试网站,以测试它是否只是我,我仍然遇到这个问题。

I'm using Pure CSS to layout a site, and I've run into an issue. If there's any whitespace between nested grid elements, it breaks the layout and pushes the last div onto the next line. I created a test website with as little in it as possible to test if it was just me, and I'm still running into the problem.

<html>
  <head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
  </head>
  <body>
    <div class="pure-g">
      <div class="pure-u-1-2">
        <div class="pure-u-1-3">
          <p>Hello world</p>
        </div>
        <div class="pure-u-1-3">
          <p>Hello</p>
        </div>
        <div class="pure-u-1-3">
          <p>Hey there</p>
        </div>
      </div>
      <div class="pure-u-1-2">
        <p>Hi :)</p>
      </div>
    </div>
  </body>
</html>

此代码导致:

如果我从div之间删除空格,如

If I take the whitespace out from between the divs, as in

<div class="pure-u-1-3"><p>Hello world</p></div><div class="pure-u-1-3"><p>Hello</p></div><div class="pure-u-1-3"><p>Hey there</p></div>

可修复本身:

Chrome和Firefox都出现此问题。这是Pure CSS的一个问题,还是我做了可怕的错误?

This issue is occurring in both Chrome and Firefox. Is this an issue with Pure CSS, or am I doing something horribly wrong?

编辑:我发现了一个特定于YUI Pure CSS的解决方案。要嵌套布局,每组列都需要有自己的 .pure-g div。我更详细地介绍了。

I found a solution specific to YUI Pure CSS. To nest layouts, each set of columns needs to be in its own .pure-g div. I put this in more detail on the Github issue.

推荐答案

inline-block 注释:

<div class="pure-u-1-2"><!--
    --><div class="pure-u-1-3"><p>Hello world</p></div><!--
    --><div class="pure-u-1-3"><p>Hello</p></div><!--
    --><div class="pure-u-1-3"><p>Hey there</p></div>
</div>

这篇关于导致div在Pure CSS中堆叠的空白的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-18 16:25