Grid Scruffy产品，跳出该区域，css float：left：

Question

我正在创建一个产品网格，让他们左对齐并始终以这种方式：http://i.imgur.com/dlUPvPf.jpg

这个班级将负责以这种方式组织产品：

  

    

.center_conteudo ul.Dot_ListaProdutosULClass li.Dot_ListaProdutosLIClass {

         

宽度：188px;

         

min-height：218px;

         

保证金：0 12px 30px 0;

         

float：left;

         

background：url（＆＃34; ../ imagens / produto_img_prateleira.png＆＃34;）no-repeat 0px 125px;

         

}

  

最终形式就是这样 http://bit.ly/1nUyEJo

帮帮我！谢谢;）

Answer 1

如果你有一个固定网格，每行有四个元素，并且你希望每个第5个元素都分成一个新行，你可以使用nth-child：

element:nth-child(4n - 3) {
    clear: both;
}

在您的示例中，那是：

.center_conteudo ul.Dot_ListaProdutosULClass li.Dot_ListaProdutosLIClass:nth-child(4n - 3) {
    clear: both;
}

请注意，某些旧版本的IE不支持：nth-​​child选择器。