html - purecss.io - 为什么两个 pure-u-1-2 元素堆叠在宽屏幕上？

Question

整个早上我都在用头撞这个问题(尝试了几乎所有可能的组合)，我仍然无法弄清楚这一点。

为什么两个 pure-u-1-2 元素相互堆叠？在桌面上的 Chrome 上进行了测试(使用其他浏览器进行了验证)，并且它们所属的 pure-u-5-6 元素的宽度为 1000px？

<div class="pure-g-r">
  <div class="pure-u-1-12"></div>
  <div class="pure-u-5-6">
    <div>
      <div class="pure-g">
        <h1>Photo Albums</h1>
        <div class="pure-u-1-2">
          <img src="/redacted-url">
        </div>
        <div class="pure-u-1-2">
          <p>Why is this text below the image?</p>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-u-1-12"></div>
</div>

另请注意，当我按 Ctrl+Shift+C 进入 Debug模式时，我可以确认两个 pure-u-1- 2 元素设置为适当的宽度。

Answer 1

看看this on jsfiddle 。代码:

<div class="pure-g-r">
  <div class="pure-u-1-12"></div>
  <div class="pure-u-5-6">
    <div>
        <h1 style="text-align: center">photo albums</h1>
        <div class="pure-g">
        <div class="pure-u-1-2">
          <img src="/redacted-url">
        </div>
        <div class="pure-u-1-2">
          <p>Why is this text below the image?</p>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-u-1-12"></div>
</div>

你必须把你的 pure-g 类放在 h1 之后，否则下一个 pure-u 元素将位于这个标签之后(就像你在 h1 标签和 div 标签上都留有 float left 类的 pure-u-) 1-2).