整个上午我都在用头撞这个(尝试几乎所有可能的组合),我还是搞不懂。
为什么这两个元素相互叠加?在桌面上的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/