3-2编程对吗?
来源:3-2 编程练习
DoesZ
2017-11-02 20:50:58
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实战练习</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.a{
width: 806px;
height: 394px;
border:1px dashed #ccc;
clear: both;
}
.b{
width: 240px;
height: 165px;
border:1px solid #ccc;
float: left;
text-align: center;
margin-top: 20px;
}
.c{
margin-bottom: 10px;
}
.d{margin-left: 20px;
margin-right: 10px;}
.e{margin-right: 20px;}
</style>
</head>
<body>
<div class="a">
<div class="b c d">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="b c d">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="b c e">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="b d">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="b d">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="b e">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</body>
</html>
不知道对于外边距的处理是否存在问题?会不会这种方法比较笨。。。
1回答
小丸子爱吃菜
2017-11-03
整体思路没有问题,只是盒子与盒子之间的距离不够均匀。
盒子与盒子之间外边距,可以用最外层盒子的宽度-里面3个盒子的宽度/4,得出的这个值就是它们之间的边距。
祝学习愉快!
相似问题