最下面圖片的下邊框跑到頁面上方了，怎么解決
<!DOCTYPE html>
<html>
<head>
<title>自制瀑布流布局</title>
<meta charset="utf-8">
<style type="text/css">
#main{background:#346;-webkit-column-width:200px;-moz-column-width:200px;-o-column-width:200px;-ms-column-width:200px;
-webkit-column-gap:5px;-moz-column-gap:5px;-o-column-gap:5px;-ms-column-gap:5px;}
.box{padding: 15px 0 0 15px;}
.pic{padding: 10px;border-radius: 5px;box-shadow: 5px 5px 5px #ccc;border:2px solid #ccc;width: 161px}
.pic img{width: 161px;display: block;height: auto;}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="pic/0.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/4.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/5.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/6.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/7.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/8.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/9.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/10.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/11.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/12.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/13.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/14.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/15.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/16.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/17.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/18.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/19.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/20.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="pic/21.jpg" />
</div>
</div>
</div>
</body>
</html>
2017-08-16
div加 display:inline-block;可以解決，但是并不完美，頂部的框沒有了，但還是能看到一點div的邊框陰影，請問一下，有沒有比較完美的解決辦法呢？
2016-10-24
css多列布局?第一段對多列布局的介紹
BUG出現原因：引用 @天涯123 的回答 “css3多欄布局偶爾會出現某一列起始高度比另外列的起始高度略高,或者會出現某一列第一張圖片的頂部顯示在它前一列最后一張圖片后面,這是因為css3多列加載的機制是一列列的排滿后再到第二列,以此來達到瀑布流的效果,瀏覽器在渲染這些圖片的時候是按照寬度和列數(或者圖片的設置寬度)來決定每列圖片多少張,但是因為圖片的高度是不定的”
?起初只是用來為多行文本（行內元素）進行多列布局，而這個案例我們的div是塊級元素，
所以呢，只需要設置div屬性 display:inline-block; ?這樣我們就可以實現想要的效果了
2016-09-01
css3多欄布局偶爾會出現某一列起始高度比另外列的起始高度略高,或者會出現某一列第一張圖片的頂部顯示在它前一列最后一張圖片后面,這是因為css3多列加載的機制是一列列的排滿后再到第二列,以此來達到瀑布流的效果,瀏覽器在渲染這些圖片的時候是按照寬度和列數(或者圖片的設置寬度)來決定每列圖片多少張,但是因為圖片的高度是不定的,所以在首列加載完畢到次列開始渲染的時候,因為我們給box設置padding的原因,容易出現上述兩種問題,不得不說這個有一定的偶然性,解決的方法是:不要給直接包裹圖片的div設置padding值!
2016-08-27
我也遇到了，不知道該怎么弄了，你的解決了嗎
2016-08-27
我也遇到了，不知道該怎么弄了，你的解決了嗎