整个上午我都在用头撞这个(尝试几乎所有可能的组合),我还是搞不懂。
为什么这两个元素相互叠加?在桌面上的Chrome上进行了测试(使用其他浏览器进行了验证),它们所属的pure-u-1-2元素的宽度为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>

另外请注意,当我进入调试模式时,我可以确认两个pure-u-5-6元素设置为适当的宽度。

最佳答案

看看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标记上都有pure-u-1-2类的float left一样)。

关于html - purecss.io-为什么两个pure-u-1-2元素堆叠在宽屏幕上?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18448718/

10-12 06:32