关于这个作业的几个问题
来源：3-4 编程练习
Rockets总冠军
2019-05-21 15:38:59
老师我有几个问题想询问一下：
1.包含image和文字的div的宽度设置，因为读入图片是的时候没有设置高和宽，所以这个div要画边框所以必须设置准确的宽度值，我是通过浏览器的检查操作，来得到image的宽度再设置的div宽度值，请问老师还有别的方法吗？
2.container的div宽度的设置。题目中是一个包含2行3列的div，这里的宽度设置是不是需要自己通过image的宽度和margin，padding的值自己计算之后设置，有没有别的方法？
3.两个元素之间的margin是margin值得两倍，有没有办法在需要的时候合并这个值，还是必须自行的需要多少边距就除以2，来设置各自方向上的margin？
我刚开始设置margin是15px，发现元素间是30px，和边框是15px。题目图片中要求是这些距离都相等，所以这里的处理办法是不是1.自行调整相应的div的margin2.直接给最大的container的div设置15px的padding值？
我的代码如下，麻烦老师帮我看下效果，和哪里需要改进，谢谢老师！
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.main{
border:2px dashed #eee;
margin:5px;
padding:10px;
width:796px;
overflow:hidden;
zoom:1;
}
.main div{
border:2px solid #eee;
width:240px;
margin:10px;
float:left;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="main">
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>
1回答
-
同学你好！关于同学提问的问题，老师的解答如下：
1、第一个问题和第二个问题都可以根据设计图来量出宽度和高度。
2、元素需要多少margin值就设置多少margin值。没有办法合并。如果同学想要让间距小一点，可以将margin值设置的小一些，同学想要让间距大一点，可以将margin值设置的大一些。
3、距离都要求相等，同学的第一种方式可以实现，
在同学的代码中没有第二种方式所讲的container这个元素，建议同学可以再详细的描述一下。
同学的习题效果完成的很好，继续加油
0h019-05-21
相似问题