3-4编程练习老师帮忙看一下完成效果

来源：3-4 编程练习

慕神7119415

2018-08-15 11:56:48

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3-4</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 846px;
            margin: 0 auto;
            border: dashed 1px #a8a8a8;
            overflow: hidden;
            padding: 10px;
        }
        .main div {
            width: 240px;
            border: solid 1px #a8a8a8;
        }
        .div1 {
            float: left;
            margin: 20px;
        }
        p {
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
    </div>
</body>
</html>

写回答

1回答

chrismorgen

2018-08-15

已采纳

中间的间距应该是相同的，都是20px，应给设置顶部的内编剧为20px；将整体的div设置为810px；div1的margin属性修改为上、右为0px，下、左为20px；我在你的代码上做了一些调整，你可以参考一下，祝学习愉快~

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3-4</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 810px;
            margin: 0 auto;
            border: dashed 1px #a8a8a8;
            overflow: hidden;
            padding-top: 20px;
        }
        .main div {
            width: 240px;
            border: solid 1px #a8a8a8;

        }
        .div1 {
            float: left;
            margin: 0px 0px 20px 20px;
        }
        p {
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
        <div class="div1">
            <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
    </div>   
</body>
</html>

0 学习 · 10204 问题

查看课程

相似问题

3-4编程练习不能按效果图呈现？？？

回答 5

3-4编程练习老师帮看一下有问题吗

回答 1

3-4编程的练习

回答 1

3-4的编程题麻烦老师帮看下，两个图，一个是我的，另一个是要求的

回答 1

3-4编程练习

回答 1

打开慕课网App查看更多内容