按照老實步驟跟著做，但是結(jié)果怎么會這樣
<!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é)果有點不一樣呀
2015-12-29
看著沒什么問題呀！
2016-09-01
css3多欄布局偶爾會出現(xiàn)某一列起始高度比另外列的起始高度略高,或者會出現(xiàn)某一列第一張圖片的頂部顯示在它前一列最后一張圖片后面,這是因為css3多列加載的機制是一列列的排滿后再到第二列,以此來達到瀑布流的效果,瀏覽器在渲染這些圖片的時候是按照寬度和列數(shù)(或者圖片的設置寬度)來決定每列圖片多少張,但是因為圖片的高度是不定的,所以在首列加載完畢到次列開始渲染的時候,因為我們給box設置padding的原因,容易出現(xiàn)上述兩種問題,不得不說這個有一定的偶然性,解決的方法是:不要給直接包裹圖片的div設置padding值!
2016-04-27
我也是這樣的問題，請問樓主解決了嗎？
2016-04-20
.box{
display: inline-block;
}
就可以了
2016-02-05
這個CSS3 的多欄布局 它放圖片是從上往下放的，而我們用JS或JQ實現(xiàn)的是從左往右放的。可能是因為這樣的原因，使得放不下的邊框被放在了下一列的上面。具體原因木有去做過多的研究，解決方法也不明。如果知道具體原因和解決方法記得說一聲哦~~
2015-12-31
我也出現(xiàn)這個問題了，你是怎么解決的呢？
2015-12-30
第三列和第八列頂部有剩余的框，分別是第二列和第七列底部的框，不完整