为什么实现不了一行显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        #box {
            width: 80%;
            margin: 0 auto;
            background: #ccc;
            text-align: center;
        }

        #box>img {
            display: inline-block;
            padding: 1.5%;
            width: 90%;
            height: 200px;
        }

        /*此处写代码*/
        @media (min-width:440px) {
            #box>img{
                width: 45%;
            }
        }
        @media (min-width:780px) {
            #box>img{
                width: 28%;
            }
        }
        @media (min-width:960px) {
            #box>img{
                width: 20%;
            }
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e49100014e5010601059.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e53b00012e6d09940789.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e53c0001d04e09940732.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e49100014e5010601059.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e53b00012e6d09940789.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e53c0001d04e09940732.jpg" alt="">
    </div>
</body>

</html>

Aurora_Meteor 2020-04-19

源自：移动Web开发入门 3-24 编程练习

收起

2回答

好帮手慕粉回答被采纳获得+3积分 2020-04-20 17:34:06

同学你好，关于同学的问题回答如下：
1、因为不打开控制台时，页面的宽度不符合我们设置的条件，所以就不会显示一行一张。

2、当同学把min-width:440px里面的图片宽度调整为50%时，当页面在440-780之间时，不能由一张显示为两张是因为在这个区间，一行只能放下一张图片（图片设置的宽度为50%，又有左右padding，所以一张图片的实际宽度是超过50%的）。当超过780时，图片宽度变为了28%，就又恢复了正常。

3、同学不要关心硬件条件，浏览器最小宽度是多少不是我们所能掌控的，同学只要按照要求正确实现效果即可。

祝学习愉快~

收起回答

好帮手慕粉 2020-04-20 11:05:04

同学你好，关于同学的问题回答如下：

1、代码实现的是正确的。

2、因为父容器的宽度只能容下四张图片，所以不能一行显示。

祝学习愉快~

收起回答

提问者 Aurora_Meteor #1

老师我的意思是不能实现一行一张图片的情况。这个代码我的页面缩放到最小后是两张图片，通过打开控制台并且让控制台在右侧才能实现一行一张；但是把min-width:440px时图片的宽度改为50%后就可以实现页面缩放到最小后一行一张，但是增大页面宽度时发现会直接跳到一行三张的情况，不会出现一行两张。

2020-04-20 16:26:22