用css3圖片第一行會(huì)向上偏移?
如圖,第一行不一樣高?
*{margin:0;padding:0;}
#main{-webkit-column-width:202px;-webkit-column-count:6;}
.box{padding:15px 0 0 15px;}
.pic{width:165px;border-radius:5px;box-shadow:0 0 5px #ccc;padding:10px;border:1px solid #ccc;}
.pic img{width:165px;height:auto;display:block;}
.pic:hover{box-shadow:0 0 7px gray;}
2018-01-03
給box設(shè)置display:inline-block;
2017-02-16
給main 設(shè)置? display:inline-block;
2016-09-01
css3多欄布局偶爾會(huì)出現(xiàn)某一列起始高度比另外列的起始高度略高,或者會(huì)出現(xiàn)某一列第一張圖片的頂部顯示在它前一列最后一張圖片后面,這是因?yàn)閏ss3多列加載的機(jī)制是一列列的排滿后再到第二列,以此來(lái)達(dá)到瀑布流的效果,瀏覽器在渲染這些圖片的時(shí)候是按照寬度和列數(shù)(或者圖片的設(shè)置寬度)來(lái)決定每列圖片多少?gòu)?但是因?yàn)閳D片的高度是不定的,所以在首列加載完畢到次列開(kāi)始渲染的時(shí)候,因?yàn)槲覀兘obox設(shè)置padding的原因,容易出現(xiàn)上述兩種問(wèn)題,不得不說(shuō)這個(gè)有一定的偶然性,解決的方法是:不要給直接包裹圖片的div設(shè)置padding值!
2016-08-27
css3的演示,我也試了,我的也有一列不對(duì)