最下面圖片的下邊框跑到頁(yè)面上方了，怎么解決
<!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;可以解決，但是并不完美，頂部的框沒(méi)有了，但還是能看到一點(diǎn)div的邊框陰影，請(qǐng)問(wèn)一下，有沒(méi)有比較完美的解決辦法呢？
2016-10-24
css多列布局?第一段對(duì)多列布局的介紹
BUG出現(xiàn)原因：引用 @天涯123 的回答 “css3多欄布局偶爾會(huì)出現(xiàn)某一列起始高度比另外列的起始高度略高,或者會(huì)出現(xiàn)某一列第一張圖片的頂部顯示在它前一列最后一張圖片后面,這是因?yàn)閏ss3多列加載的機(jī)制是一列列的排滿后再到第二列,以此來(lái)達(dá)到瀑布流的效果,瀏覽器在渲染這些圖片的時(shí)候是按照寬度和列數(shù)(或者圖片的設(shè)置寬度)來(lái)決定每列圖片多少?gòu)?但是因?yàn)閳D片的高度是不定的”
?起初只是用來(lái)為多行文本（行內(nèi)元素）進(jìn)行多列布局，而這個(gè)案例我們的div是塊級(jí)元素，
所以呢，只需要設(shè)置div屬性 display:inline-block; ?這樣我們就可以實(shí)現(xià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片的高度是不定的,所以在首列加載完畢到次列開始渲染的時(shí)候,因?yàn)槲覀兘obox設(shè)置padding的原因,容易出現(xiàn)上述兩種問(wèn)題,不得不說(shuō)這個(gè)有一定的偶然性,解決的方法是:不要給直接包裹圖片的div設(shè)置padding值!
2016-08-27
我也遇到了，不知道該怎么弄了，你的解決了嗎
2016-08-27
我也遇到了，不知道該怎么弄了，你的解決了嗎