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

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

我用特定的描述注释了这些行.

总的来说,它做的是:

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

3. 处理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;
       }
   }
   

   1. W3
   2. 3px浮动bug
   3. Stubornella

我想你错过了一些东西.您需要基本样式.col才能理解最后一个col.