老师，请帮忙检查下
来源：3-4 编程练习
Grayson_liu
2019-04-02 21:53:01
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<title></title>
<meta charset="UTF-8">
<style>
*{
margin:0px;
padding:0px;
}
.container{
width:800px;
height:400px;
border:1px dashed #ececec;
margin:20px;
}
.div1,.div2,.div3,.div4,.div5,.div6{
height:150px;
border:1px solid #ececec;
}
.div1,.div2,.div3{
float:left;
margin:10px;
padding-bottom:10px;
}
.div4,.div5,.div6{
float:left;
margin:10px;
padding-bottom:10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="div1">
<p><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></p>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div2">
<p><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></p>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div3">
<p><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></p>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div4">
<p><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></p>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div5">
<p><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></p>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div6">
<p><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></p>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好！
按照效果图，每个间隙是一样的:
所以我们可以给打的div设置宽高：
宽度为（小div宽度240px+border的2px）*3 + 间隙20px *4 =806px
高度为（小div高度度150+padding-bottom的10px+ border的2px）*2 +间隙20px 20 *3 =384px
如果解决了你的疑惑，望采纳， 祝学习愉快~~
0
相似问题