关于2-14图片定位的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
padding: 0;
margin: 0;
}
/* 主体 */
.container{
width: 1000px;
height: 600px;
position: absolute;
top:50%;
left: 50%;
margin-top: -300px;
margin-left: -500px;
border: 1px red solid;
}
/* 第一行 */
.line1{
width: 100%;
background: blue;
height: 60%;
}
/* 第一行 第一张图 */
.picture1{
background: url(http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg) no-repeat;
width: 360px;
height: 215px;
float: left;
margin-top: 72.5px;
margin-left: 90px;
}
/* 第一行 第二张图 */
.picture2{
background: url(http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg) no-repeat;
width: 360px;
height: 215px;
float: right;
margin-top: 72.5px;
margin-right: 90px;
}
/* 第二行 */
.line2{
width: 100%;
background: pink;
height: 40%;
position: relative;
}
/* 第二行 第一张图 */
.picture3{
width: 200px;
height: 60px;
background: url(http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg) no-repeat;
margin-top: 90px;
margin-left: 90px;
}
/* 第二行 第二张图 */
.picture4{
width: 200px;
height: 60px;
background: url(http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg) no-repeat;
position: absolute;
top: 90px;
left: 400px;
}
/* 第二行 第三张图 */
.picture5{
width: 200px;
height: 60px;
background: url(http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg) no-repeat;
position: absolute;
top: 90px;
left: 710px;
}
</style>
</head>
<body>
<div class="container">
<!-- 第一行 -->
<div class="line1">
<div class="picture1"></div>
<div class="picture2"></div>
</div>
<!-- 第二行 -->
<div class="line2">
<div class="picture3"></div>
<div class="picture4"></div>
<div class="picture5"></div>
</div>
</div>
</body>
</html>
问题：
我已开始使用position来定位，后来想试试用margin能不能行，结果发现对于第一行的两张图片是可行的，但是在设置picture3 也就是第二行的第一张图片的时候，我发现使用margin-top后整个粉色的div都会脱节，这是怎么回事呢，希望老师给出解决方案，感谢！！！
正在回答
下面的三组图片可以去掉定位 ， 改为使用 float: left; ,然后可以使用margin设置图片的边距 ，或者三张图片都是要定位 ，设置top值和left的值。如果解答了你的疑惑 ，望采纳 ， 祝学习愉快 ！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星