使用nth-child而不是css选择器

Question

我尝试使用css进行构建页面布局.我希望它尽可能多地独立于内容.

我的想法是每行有4个div,我使用float:left为所有div和:nth-​​child(4n + 1)选择器为clear:both.有些div我想成为第一个(cr之前),并且我用class ="cr"标记它,但是我希望它在同一行之后有3个div,在cr之前(clear:both).

目标是:

Test Test
Test Test Test Test 
Test Test Test Test

可能吗 ？到目前为止我在这里:http: //jsbin.com/isowab/1/edit

Answer 1

你想要做的是根据我的知识在纯粹的css中不可能实现(但我会非常乐意被证明是错误的).

如果我理解你的话......你想要nth在每div节课之后重新计算.cr一下吗？

遗憾的是,CSS无法正常工作.每次分配新nth规则时,它将从头开始应用于所有类型的元素.使用相邻的选择器+或者~你可以做一些魔法...例如,nth只有在第一次出现.cr类后才开始使用规则来应用样式

但是nth在每节课后都无法重置计数器.cr.

您可以通过添加分层结构或通过使用javascript或serverside分配特定类来动态地执行此操作...但不是在纯css中.

编辑:例如,如果您使用jQuery,您可以添加如下内容:

    var i=1;
    $("div").each(function(){
        if($(this).hasClass('cr') || i%5==0){
            $(this).addClass('cr');
            i=1;
        }
        i++;
    });

而在CSS适用clear:both;于.cr类.

这是jsfiddle中的这个例子:http://jsfiddle.net/MJ29T/