搭建響應(yīng)式網(wǎng)站時，在制作CSS3響應(yīng)式設(shè)計，圖片列表不固定高度，列式布局的時候，會出現(xiàn)上一個高度過高，圖片大小不一導(dǎo)致的頁面錯位的解決方法。

如下圖的樣式：

樣式分析與解決方法：

由于是響應(yīng)式布局，不能用css固定圖片的寬高，從代碼上看，這里每個圖文用的是li，而且每4個li是一排，我們只需要對第1個li 第5個li 第9個li 。就是每排的第1個li加入css代碼 clear:left; 即可

例如上面列子的

.portfolio-list li:nth-child(4n+5){clear:left;}

這樣添加好css代碼后，可解決錯位問題。

小知識：

CSS3選擇器nth-child(n)實現(xiàn)隔幾行選擇元素

nth-child(n)，n 可以是數(shù)字、關(guān)鍵詞或公式。選擇器匹配屬于其父元素的第N個子元素，不論元素的類型。

序號寫法：

/*把第3個LI的背景設(shè)為橙色*/
li:nth-child(3){background:orange;}

倍數(shù)寫法：

/*把第3、第6、第9、…、所有3的倍數(shù)的LI的背景設(shè)為橙色*/
li:nth-child(3n){background:orange;}

倍數(shù)分組匹配：

/*匹配第1、第4、第7、…、每3個為一組的第1個LI*/
li:nth-child(3n+1){background:orange;}

/*匹配第5、第8、第11、…、從第5個開始每3個為一組的第1個LI*/ 
li:nth-child(3n+5){background:orange;}

/*匹配第5-1=4、第10-1=9、…、第5的倍數(shù)減1個LI*/
li:nth-child(5n-1){background:orange;}

隔三行設(shè)置顏色

$("tr:nth-child(3n)").css("background","#eee");

每隔三行的第二行和第三行設(shè)置顏色

$("tr:nth-child(3n)").css("background","#eee"); 
$("tr:nth-child(3n+2)").css("background","#ccc");