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,得出的这个值就是它们之间的边距。

祝学习愉快!

0

0 学习 · 36712 问题

查看课程

相似问题