最下面图片的下边框跑到页面上方了，怎么解决
<!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 20:37:53
div加 display:inline-block;可以解决，但是并不完美，顶部的框没有了，但还是能看到一点div的边框阴影，请问一下，有没有比较完美的解决办法呢？
-
- 慕粉3819970
- 2016-10-24 16:42:58
css多列布局 第一段对多列布局的介绍
BUG出现原因：引用 @天涯123 的回答 “css3多栏布局偶尔会出现某一列起始高度比另外列的起始高度略高,或者会出现某一列第一张图片的顶部显示在它前一列最后一张图片后面,这是因为css3多列加载的机制是一列列的排满后再到第二列,以此来达到瀑布流的效果,浏览器在渲染这些图片的时候是按照宽度和列数(或者图片的设置宽度)来决定每列图片多少张,但是因为图片的高度是不定的”
起初只是用来为多行文本（行内元素）进行多列布局，而这个案例我们的div是块级元素，
所以呢，只需要设置div属性 display:inline-block; 这样我们就可以实现想要的效果了
-
- 小白师兄
- 2016-09-01 23:41:30
css3多栏布局偶尔会出现某一列起始高度比另外列的起始高度略高,或者会出现某一列第一张图片的顶部显示在它前一列最后一张图片后面,这是因为css3多列加载的机制是一列列的排满后再到第二列,以此来达到瀑布流的效果,浏览器在渲染这些图片的时候是按照宽度和列数(或者图片的设置宽度)来决定每列图片多少张,但是因为图片的高度是不定的,所以在首列加载完毕到次列开始渲染的时候,因为我们给box设置padding的原因,容易出现上述两种问题,不得不说这个有一定的偶然性,解决的方法是:不要给直接包裹图片的div设置padding值!
-
- 慕粉小闹
- 2016-08-27 17:14:23
我也遇到了，不知道该怎么弄了，你的解决了吗
-
- 慕粉小闹
- 2016-08-27 17:14:17
我也遇到了，不知道该怎么弄了，你的解决了吗