按照老實(shí)步驟跟著做，但是結(jié)果怎么會(huì)這樣
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<style>
*{ margin:0; padding:0;}
#main{-webkit-column-width:202px; -moz-column-width:202px; -o-column-width:202px; -ms-column-width:202px; -webkit-column-gap:3px; -moz-column-gap:3px; -o-column-gap:3px; -ms-column-gap:3px;}
.box{ padding:10px 0 0 15px;}
.pic{ width:165px; padding:10px; border-radius:5px; border:1px solid #c8c8c8; /*陰影*/ box-shadow:0 0 5px #c8c8c8;}
.pic img{ width:165px; height:auto; display:block;}
</style>
</head>
<body>
<div id="main">
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/1.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/2.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/3.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/4.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/5.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/6.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/7.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/8.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/9.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/10.jpg">
??????? </div>
??? </div>
?? ?<div class="box">
??????? <div class="pic">
??????????? <img src="images/11.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/12.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/13.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/14.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/15.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/16.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/17.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/18.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/19.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/20.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/21.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/22.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/23.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/24.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/25.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/26.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/27.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/28.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/29.jpg">
??????? </div>
??? </div>
??? <div class="box">
??????? <div class="pic">
??????????? <img src="images/30.jpg">
??????? </div>
??? </div>
</div>?? ?
?? ?
?? ?
?? ?
?? ?
?? ?
</body>
</html>
結(jié)果有點(diǎn)不一樣呀
2015-12-29
看著沒(méi)什么問(wèn)題呀！
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-04-27
我也是這樣的問(wèn)題，請(qǐng)問(wèn)樓主解決了嗎？
2016-04-20
.box{
display: inline-block;
}
就可以了
2016-02-05
這個(gè)CSS3 的多欄布局 它放圖片是從上往下放的，而我們用JS或JQ實(shí)現(xiàn)的是從左往右放的?？赡苁且?yàn)檫@樣的原因，使得放不下的邊框被放在了下一列的上面。具體原因木有去做過(guò)多的研究，解決方法也不明。如果知道具體原因和解決方法記得說(shuō)一聲哦~~
2015-12-31
我也出現(xiàn)這個(gè)問(wèn)題了，你是怎么解決的呢？
2015-12-30
第三列和第八列頂部有剩余的框，分別是第二列和第七列底部的框，不完整