按照老实步骤跟着做，但是结果怎么会这样
<!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>
结果有点不一样呀
个回答
-
- 李晓健
- 2015-12-29 17:32:32
看着没什么问题呀！
-
- 小白师兄
- 2016-09-01 23:45:21
css3多栏布局偶尔会出现某一列起始高度比另外列的起始高度略高,或者会出现某一列第一张图片的顶部显示在它前一列最后一张图片后面,这是因为css3多列加载的机制是一列列的排满后再到第二列,以此来达到瀑布流的效果,浏览器在渲染这些图片的时候是按照宽度和列数(或者图片的设置宽度)来决定每列图片多少张,但是因为图片的高度是不定的,所以在首列加载完毕到次列开始渲染的时候,因为我们给box设置padding的原因,容易出现上述两种问题,不得不说这个有一定的偶然性,解决的方法是:不要给直接包裹图片的div设置padding值!
-
- 逃离星球
- 2016-04-27 14:35:02
我也是这样的问题，请问楼主解决了吗？
-
- 林林冰莹
- 2016-04-20 22:40:18
.box{
display: inline-block;
}
就可以了
-
- 昨天de梦
- 2016-02-05 11:52:37
这个CSS3 的多栏布局 它放图片是从上往下放的，而我们用JS或JQ实现的是从左往右放的。可能是因为这样的原因，使得放不下的边框被放在了下一列的上面。具体原因木有去做过多的研究，解决方法也不明。如果知道具体原因和解决方法记得说一声哦~~
-
- 逗比张Mike
- 2015-12-31 14:38:41
我也出现这个问题了，你是怎么解决的呢？
-
- 取个名字这么难
- 2015-12-30 09:45:25
第三列和第八列顶部有剩余的框，分别是第二列和第七列底部的框，不完整