Question

div中图片为什么都重叠在一起了

本来应该是并排排列出来的 ，怎么都重叠在一起了
我调试了发现是position:absolute的问题 ，为什么会这样





Answer 1

原因：

它们使用了相同的class .thumbnail ，position:absolute 是绝对定位，定义的值是多少，它的位置就固定在哪里，不会变动，所以才全部重贴在一起。

1. 竖着排列：把position属性删掉就可以了，然后加点margin属性控制图片之间的上下间隔就可以了。

2. 横着排列：如果坚持用position：应该使用相对定位。position：relative ，但是div默认的display：block，它们并不会在一行内并排显示，而是会竖着排列，想要横着排就得单独定义每一个div的样式，比较麻烦。想要实现横着并排，应该使用浮动float。大概像下面这样的：

/* .thumbnail*/
.thumbnail{
    float:left;
    width:20%;/*控制长度肯定会导致图片被裁剪，可以考虑使用display：inline 而不用定义长度，但不控制长度，就发发生跨行排列的情况，就看你怎么取舍了*/
    height：100px;/*加上高度使得布局整齐划一*/
}
/*给父元素增加一个class，清除float,否则图片会脱离文档流，给其他元素的布局带来影响*/
.clear:after{
    content:"";
    display:table;
    clear:both;
}
最后的HTML代码类似这样：
<div class="clear">
    <div class="thumbnail"><img ....></div>
</div>