想把两个图推到中间，计划加margin:10px 60px；但是实现不什么原因，先实现上面top即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是第2-14编程题</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
.top{
width: 900px;
background: #9cf;
height: 450px;
margin: 0 auto;
}
.picleft{
background: url("http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg") no-repeat;
width: 360px;
height: 215px;
float: left;
}
.picright{
background: url("http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg") no-repeat;
width: 360px;
height: 215px;
float: left;
margin:30px;
}
.bottom{
width: 900px;
background: #fcc;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top">
<div class="picleft"></div>
<div class="picright"></div>
</div>
<div class="bottom">
<div class="pic1"></div>
<div class="pic2"></div>
<div class="pic3"></div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
你好同学，是说的给两个图片都设置margin:10px 60px吗？这里是设置间距太多，导致图片挤下去了， margin:10px 60px,其中的60px表示左右间距各60px ,所以每一个图片会存在120px的间距值。如下：
间距的计算原理如下：
以上半部分图片为例 (下部分图片同理) . 整体盒子设置固定宽度 . 然后计算出盒子宽度减去两张图片的宽度就是剩余的间距 ,因为左右间距一个三处间距 ,所以用剩余的间距除以3就是每个间距的值 .所以可以每一个图片设置一个左间距即可。 高度也是一样的 , 用总体高度减去图片的高度 , 然后除以2 ,就是上下边距的值 。
如下设置即可：
祝学习愉快 ，望采纳。
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星