html cols跨两列,html – CSS奇怪,甚至有2个cols

一个模式中有四篇文章,因此4n的一些偏移应该可以解决问题.这似乎工作(

Fiddle)：

article {color:blue}

article:nth-child(4n-1), article:nth-child(4n-2) {color:green}

如果你不喜欢减去,加上也是一样的(Fiddle)：

article {color:blue}

article:nth-child(4n+2), article:nth-child(4n+3) {color:green}

只是为了解释整个逻辑,这是转移4n模式的问题：

4n-3 4n-2 4n-1

# COLOR 4n 4n+1 4n+2 4n+3

-- ------ ----- ------ ------ ------

1 blue - 0 - -

2 green - - 0 -

3 green - - - 0

4 blue 1 - - -

5 blue - 1 - -

6 green - - 1 -

7 green - - - 1

8 blue 2 - - -

9 blue - 2 - -

10 green - - 2 -

11 green - - - 2

12 blue 3 - - -

13 blue - 3 - -

-1和3是全等模4,如-2和2所示,因此它们指的是相同的元素(尽管n的值在技术上对于每个元素是不同的).

你甚至可以交换它并将颜色4n和4n 1蓝色(Fiddle)：

article {color:green}

article:nth-child(4n), article:nth-child(4n+1) {color:blue}

html cols跨两列,html – CSS奇怪,甚至有2个cols相关推荐

CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例
我们碰到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...
css让子元素展示成一行,封面模板循环子栏目一行两列DIV+CSS成功实现
大致思路是:主体部分(总宽度980)分左右浮动(.vmain_l和 .vmain_r), 右侧宽250,左侧自然是980-250=730了.右侧不管它了,可以添加版块内容. 左侧宽730分配,上边的& ...
html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
任意列+左右两列等高布局，并要求有最小高度
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧因为要做个网站, ...
CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...
CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
css那些事儿2 经典两列布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <link rel=& ...

html cols跨两列,html – CSS奇怪,甚至有2个cols

html cols跨两列,html – CSS奇怪,甚至有2个cols相关推荐

最新文章

热门文章