空白导致 div 在纯 CSS 中堆叠 [重复]答案

【问题标题】：Whitespace causing divs to stack in Pure CSS [duplicate]空白导致 div 在纯 CSS 中堆叠 [重复]
【发布时间】：2014-06-01 09:02:32
【问题描述】：

我正在使用纯 CSS 来布局网站，但遇到了问题。如果嵌套网格元素之间有任何空白，它会破坏布局并将最后一个 div 推到下一行。我创建了一个测试网站，尽可能少地测试它是否只有我，但我仍然遇到问题。

<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 之间取出空格，如

<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 都会出现此问题。这是纯 CSS 的问题，还是我做错了什么？

编辑：我找到了一个专门针对 YUI Pure CSS 的解决方案。要嵌套布局，每组列都需要位于其自己的 .pure-g div 中。我把这个更详细地放在Github issue上。

【问题讨论】：

@Hugo 特别针对 YUI Pure CSS 提出了这个问题——他们的文档没有提到需要解决方法，所以我不确定我是否做错了什么。
您的问题是关于纯 CSS 的，但特征是“默认 HTML”。已经被标记为重复了，但不代表你做错了什么，只是你的问题和另一个问题太相似了，对于 Stackoverflow 来说最好把讨论集中在一个地方。

标签： html css yui-pure-css

【解决方案1】：

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>

【讨论】：

OP 提到他正在使用插件。更改 display 属性可能会破坏插件的功能...
@TJ：哦，是的。我忽略了“yui”部分。谢谢，已删除替代项。
YUI Pure CSS 文档说嵌套 div 可以正常工作，并且它们总是在示例代码中使用空格。所以我猜这可能是框架的问题？如果是这样，我会向他们提交问题。

【解决方案2】：

您应该对此主题感兴趣。请点击此链接，因为这已经过广泛的测试和讨论HERE.

【讨论】：

【解决方案3】：

空白对内联元素的渲染有影响，但除了一个之外的所有内容总是减少为一个空白。

正弦 css 将 pure-u-1-3- 33.333% 划分为一个项目，如果我们将三个放在一个盒子中（pure-u-1-2），则它已满，所以没有空格..

所以如果你放空白，最后一个 div 会因为空间不足而下降。

【讨论】：

换行符也被视为一个空格。这也适用于inline-block 元素。

【解决方案4】：

display: inline-block 将始终保留元素之间的空格（如果有的话）。有几种技巧可以消除元素之间的空白。你可以找到一些好的here。我个人认为font-size: 0pxhack 效果最好，但如果您使用 EM 可能会很麻烦

我真正建议的是使用float:left 而不是display: inline-block。这样您就可以避免使用任何肮脏的技巧来使其工作。

【讨论】：