Question

所以在OOCSS上，他们概述了他们的网格版本。我无法准确理解发生了什么。我知道它应该考虑流体布局的舍入错误，导致最后一个元素落到下一行。每条规则如何帮助解决这个问题？

我的OOCSS last-child伪选择器的scss版本：

.grid__col--last {
    display: table-cell;

    *display: block;
    *zoom: 1;
    float: none;

    _position: relative;
    _left: -3px;
    _margin-right: -3px;

    width: auto;

    &:after {
        content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
        visibility: hidden;
        clear: both;
        height: 0 !important;
        display: block;
        line-height: 0;
    }
}

Answer 1

我注释了具有特定描述的行。

总的来说，它所做的事情是：

考虑子像素舍入错误
创建新的格式设置上下文并清除浮动

照顾IE6 / 7错误

.grid__col--last {    
    display: table-cell; /* creates a new formatting context [1] */

    *display: block; /* protect old IE from table-cell */
    *zoom: 1; /* create a new formatting context for IE (via hasLayout) */
    float: none; /* removing the float which is on a normal column */

    _position: relative; /* next three lines fix an IE6 3px float bug [2]  */
    _left: -3px;
    _margin-right: -3px;

    width: auto; /* flexible width so the last col can adjust to subpixel rounding errors

    &:after { /* all this bit opens the table cell up so it takes full width - floated cols [3] */
        content: "....";
        visibility: hidden;
        clear: both;
        height: 0 !important;
        display: block;
        line-height: 0;
    }
}

我认为你遗漏了一些东西。您需要.col中的基本样式才能理解上一个col。

OOCSS最后一个网格元素是如何工作的

1 个答案: