3-4编程问题
来源：3-4 编程练习
Wang8062776
2020-03-13 14:27:14
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.container{width:850px;border:1px solid gray;
overflow:hidden;margin: 0 auto;
}
.p1,.p2,.p3,.p4,.p5,.p6{width:240px;float:left;}
p{width:240px;text-align:center;border:1px gray solid;}
</style> <!-- 此处编写样式 -->
</head>
<body>
<div class="container">
<div class="p1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="p2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="p3"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="p4"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="p5"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="p6"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div> <!-- 此处写代码 -->
</body>
</html>老师，帮我看看我的代码。有几个疑问1.class命名能不能以数字命名？就比如class=1 2 3这样，尝试了下失败了，换成p1 p2就可以了。2.怎么让六个图片和话在container中居中显示？3.为什么我的文字上部分与图片有空隙？麻烦老师了
写回答
1回答
-
同学你好，问题解答如下：
1.命名可以包含数字，但是不能以数字开头，只能以字母开头。例如1p ，1都是不规范的，p1是规范的。
2.本题不是让图片在盒子中居中，而是设置相同的间距。参考如下调整：
3.这个间隙是行内元素的特殊现象，把图片转换为块元素即可清除。
另外，边框设置的位置不对。效果图中的边框是给图片和p的父元素设置的，参考如下修改:
小盒子的实际宽度是包含边框的，3个小盒子左右边框一共是6px。所以修改之后，注意把大盒子的实际宽度也加上6px 。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
1
相似问题