导致div在Pure CSS中堆叠的空白 [英] Whitespace causing divs to stack in 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。我更详细地介绍了 Github问题。
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中堆叠的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
