Question

使用雅虎的Pure CSS

使用下面的代码块，前两个div网格按预期呈现。第一个div的孩子都是1/6，第二个孩子是1/6和5/6。然而，对于第三个，1 / 6th渲染得很好，但另外两个，3 / 6th和2/6渲染混乱，如here所示。谁知道为什么？

<div class="pure-g">
    <div class="pure-u-1-6"> 1 </div>
    <div class="pure-u-1-6"> 2 </div>
    <div class="pure-u-1-6"> 3 </div>
    <div class="pure-u-1-6"> 4 </div>
    <div class="pure-u-1-6"> 5 </div>
    <div class="pure-u-1-6"> 6 </div>
</div>
<div id="content" role="main" class="pure-g">
    <div class="pure-u-1-6"> 1 </div>
    <div class="pure-u-5-6"> 2 </div>
</div>
<div class="pure-g">
    <div class="pure-u-1-6"> 1 </div>
    <div class="pure-u-3-6"> 2 </div>
    <div class="pure-u-2-6"> 3 </div>
</div>

Answer 1

pure.css

中没有类pure-u-3-6和pure-u-2-6

改为使用pure-u-1-2和pure-u-1-3。

你更新的小提琴：
https://jsfiddle.net/u8ywdx06/2/

纯CSS网格六分之一

1 个答案: