老师可以帮我看看3-4-编程练习吗？
来源：3-4 编程练习
我学习太差被关起来了
2019-06-08 20:20:42
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3-14-编程练习</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.container
{
margin: 20px auto;
overflow: hidden;
width: 850px;
border: 1px dashed gray;
}
figure
{
float: left;
margin: 15px 20px;
text-align: center;
border: 1px solid black;
}
figcaption
{padding: 5px;}
</style>
</head>
<body>
<div class="container">
<figure>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<figcaption>欢迎来到慕课网学习知识</figcaption>
</figure>
<figure>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<figcaption>JavaScript入门教程</figcaption>
</figure>
<figure>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<figcaption>玩转Bootstrap基础篇</figcaption>
</figure>
<figure>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<figcaption>欢迎来到慕课网学习知识</figcaption>
</figure>
<figure>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<figcaption>JavaScript入门教程</figcaption>
</figure>
<figure>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<figcaption>玩转Bootstrap基础篇</figcaption>
</figure>
</div>
</body>
</html>有什么问题或改进之处？
写回答
1回答
-
你好，代码中是有问题的哦，习题中要求图片与图片之间的间隙与图片与边界之间的间隙相等：
可以效果中确实不相等的，可以调整一下。
参考：
每个小盒子占据的宽度：图片宽度+左右边框+左右margin=240+2+30=272.
那么三个小盒子占据的宽度就是272*3=816.这样设置之后，图片与图片之间的间距是30px，而图片与边界之间的间距为15px，所以需要给大盒子添加相同的间距padding填充。
自己可以测试下，祝学习愉快！
0
相似问题