请老师检查并回答下代码中提到的问题

来源:3-24 编程练习

weixin_慕村1291783

2020-12-09 11:48:08

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!-- <meta name=""> -->

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        

        #box {

            width: 80%;

            margin: 0 auto;

            background: #ccc;

            text-align: center;

            /* display: flex;

            flex-wrap: wrap;

            justify-content: center; */

        }

        

        #box>img {

            display: inline-block;

            padding: 1.5%;

            width: 97%;

            height: 200px;

        }

        /*此处写代码*/

        

        @media (min-width:440px) {

            #box>img {

                display: inline-block;

                padding: 1.5%;

                width: 46%;

                height: 200px;

            }

        }

        

        @media (min-width:780px) {

            #box>img {

                display: inline-block;

                padding: 1.5%;

                width: 29.3333333%;

                /*为什么30.333333%不行*/

                height: 200px;

            }

        }

        

        @media (min-width:960px) {

            #box>img {

                display: inline-block;

                padding: 1.5%;

                width: 21%;

                /*为什么22%不行*/

                height: 200px;

            }

        }

    </style>

</head>


<body>

    <div id="box">

        <img src="http://img.mukewang.com/climg/5a45e49100014e5010601059.jpg" alt="">

        <img src="http://img.mukewang.com/climg/5a45e53b00012e6d09940789.jpg" alt="">

        <img src="http://img.mukewang.com/climg/5a45e53c0001d04e09940732.jpg" alt="">

        <img src="http://img.mukewang.com/climg/5a45e49100014e5010601059.jpg" alt="">

        <img src="http://img.mukewang.com/climg/5a45e53b00012e6d09940789.jpg" alt="">

        <img src="http://img.mukewang.com/climg/5a45e53c0001d04e09940732.jpg" alt="">

    </div>

</body>


</html>


写回答

1回答

好帮手慕久久

2020-12-09

同学你好,代码正确,问题解答如下:

同学的代码中,img的高度如果设置成百分比,是相对于父元素来计算的,由于没有给父元素设置具体的高度,所以设置成百分比会无效。给父元素设置一个固定高度即可,如下:

http://img.mukewang.com/climg/5fd0631609eaa3dc05030282.jpg

http://img.mukewang.com/climg/5fd0639c0947a83718440647.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程