老师检查一下，谢谢
来源：3-4 编程练习
ZZZZZzn
2020-03-21 16:20:25
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0px; margin:0px;}
.o{width:1200px; margin:0 auto;}
.one{width:1200px;
overflow:hidden;
*zoom:1;
}
.one-1,.one-2,.one-3{float:left;
margin:10px;
border:1px solid #ddd;
}
.two{width:1200px;
overflow:hidden;
*zoom:1;
}
.two-1,.two-2,.two-3{float:left;
margin:10px;
border:1px solid #ddd;
}
</style>
</head>
<body>
<div class="o">
<div class="one">
<div class="one-1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>欢迎来到慕课网学习新知识！</div>
<div class="one-2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>欢迎来到慕课网学习新知识！</div>
<div class="one-3"><img src=http://climg.mukewang.com/590fe982000150ba02400135.jpg><br/>欢迎来到慕课网学习新知识！</div>
</div>
<div class="two">
<div class="two-1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>欢迎来到慕课网学习新知识！</div>
<div class="two-2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>欢迎来到慕课网学习新知识！</div>
<div class="two-3"><img src=http://climg.mukewang.com/590fe982000150ba02400135.jpg><br/>欢迎来到慕课网学习新知识！</div>
</div>
</div>
</body>
</html>
3回答
-
好帮手慕星星
2020-03-21
同学你好，样式上还需要调整，测试效果如下
1、外层大盒子还需要根据小盒子宽度进行计算
2、外层大盒子需要添加边框，并且添加padding值，保证小盒子与边界的距离和小盒子之间的距离相等，而不是二倍的关系
修改如下
大盒子宽度计算：（图片宽度是240px+左右边框共2px+左右margin值共20px）乘以3=786px
优化：
小盒子样式相同进行合并
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
1 -
好帮手慕星星
2020-03-21
同学你好，之前提问的问题中老师是回答过类似问题的。将浮动改为行内元素，父容器中设置文本居中就可以了
但是这样外层大盒子添加上边框之后，左右两侧间隙会很大，不符合效果图，还是需要调整
自己可以测试下，祝学习愉快！
0 -
ZZZZZzn
提问者
2020-03-21
老师 请问一下，如果宽度是1200px，怎么样让三个图片水平居中显示呢
0
