3-4练习问题
来源：3-4 编程练习
saltymelon
2019-03-29 10:08:38
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{padding=0px;margin:0px;}
.container{border:1px dashed #bbb;width:790px;height:380px;margin:0 auto;padding:15px;}
.frame{border:1px solid #bbb;width:240px;float:left;margin:10px;}
.text{font-size:16px;line-height:25px;text-indent:4px;}
</style>
<!-- 此处编写样式 -->
</head>
<body>
<div class="container">
<div class="frame">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">欢迎来到慕课网学习新知识！</div>
</div>
<div class="frame">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">欢迎来到慕课网学习新知识！</div>
</div>
<div class="frame">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">欢迎来到慕课网学习新知识！</div>
</div>
<div class="frame">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">欢迎来到慕课网学习新知识！</div>
</div>
<div class="frame">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">欢迎来到慕课网学习新知识！</div>
</div>
<div class="frame">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div class="text">欢迎来到慕课网学习新知识！</div>
</div>
</div>
<!-- 此处写代码 -->
</body>
</html>
我想请问怎么调整才能达到1.里面的六个小框相对于外面的框居中显示？2.每个图片下面的文字如何做到垂直居中显示？写回答
1回答
-
好帮手慕星星
2019-03-29
你好，
1、每个小盒子设置的margin值是10px，那么两个小盒子之间的间距就是20px，小盒子与大盒子的间距是10px，如果想要做到间距相等，给大盒子设置padding值10px就可以。
2、并且需要调整大盒子的宽度，一个小盒子的宽度是242px（加上了左右边框），那么三个小盒子宽度就是242*3=726px，加上三个盒子的左右margin值：726+20*3=786px。
3、不需要设置高度，清除浮动内容把盒子撑起来就可以，参考修改：
自己可以测试下，祝学习愉快！
0
相似问题