2

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

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

<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进入调试模式时，我可以确认这两个pure-u-1-2元素已设置为适当的宽度。

4

1 回答 1

2

在 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>

你必须把你的纯 g 类放在 h1 之后，否则下一个纯 u 元素将位于这个标签之后（就像你在 h1 标签和 div 标签上都留有浮动，类 pure-u-1-2 ）。

于 2013-10-11T12:59:18.130 回答