2-14编程练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{padding:0;margin:0;text-align:center;}
.top{
background:lightskyblue;
width:100%;
height:500px;
overflow:hidden;
zoom:1;
}
.bottom{
background:lightpink;
width:100%;
height:200px;
overflow:hidden;
zoom:1;
}
img{
display:inline-block;
}
.top img{
margin:150px 120px;
}
.bottom img{
margin:80px 120px;
}
</style>
</head>
<body>
<div class="top">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt="">
</div>
<div class="bottom">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg
" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg
" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg
" alt="">
</div>
</body>
</html>
请老师帮忙检查，谢谢。
感觉越来越不会--了
正在回答
同学你好，解答如下：
1、图片左浮动之后，在一行显示，每个图片设置margin-left值，那么图片的左侧就有空隙，图片设置margin-top值，图片上方就有空隙。margin-right和margin-bottom可以不用设置
当然，代码具有灵活性，上方只是一个例子，如果同学有其他方式可以实现效果，也是可以的。
2、目前来说，接触到的知识比较少，后期会学习到flex布局，宽度不设置固定值，也是可以实现效果的，同学不要着急。
祝学习愉快~
同学你好，使用同学提供的代码测试，间距是不一样的，如下：
建议：img标签自带间隙，可以把img标签设置为块元素，清除间隙，再设置浮动让图片在一行显示。外层元素设置设置为固定的宽度，例如宽度设置为1200px：
margin-left值：父级的宽度为1200px（这里的1200px是老师自己设置的，在实际工作中可以根据设计稿设置），图片的宽度为360px，一共两张图片三个间隙，那么：1200-360*2=480/3=160px
margin-top值：父级的高度为500px，图片的高度为215px，一共上下两个间隙，那么500-215=285，285/2=142.5px
下方三张图片和上方的思路是一样的，同学可以自己写一写。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧