4

我正在使用纯 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-gdiv 中。我在Github 问题上对此进行了更详细的说明。

4

4 回答 4

2

这对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>
于 2014-05-29T07:32:30.297 回答
1

您应该对此主题感兴趣。请点击此链接，因为这已在此处进行了广泛的测试和讨论。

于 2014-05-29T07:52:57.733 回答
0

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

正弦 css 将 with pure-u-1-3-划分33.333%为一个项目，如果我们将三个放在一个 box( pure-u-1-2) 中，则它是 full ，所以没有空格用于空格..

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

于 2014-05-29T07:24:13.150 回答
0

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

我真正建议的是使用float:left而不是display: inline-block. 通过这种方式，您可以避免使用任何肮脏的技巧来使其工作。

于 2014-05-29T09:41:15.220 回答