纯CSS格子六度

Question

使用来自雅虎的 Pure CSS。

使用下面的代码块，前两个 div 网格按预期呈现。第一个div的Children都是1/6，第二个children分别是1/6和5/6。然而，对于第三个，1/6 渲染得很好，但另外两个，3/6 和 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。

您的更新 Fiddle：
https://jsfiddle.net/u8ywdx06/2/

纯CSS格子六度

Pure CSS grid sixths

html

css

yui-pure-css