为什么实现不了一行显示

来源：3-24 编程练习

Aurora_Meteor

2020-04-19 21:04:47

<!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://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>

写回答

2回答

好帮手慕粉

2020-04-20

已采纳

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

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

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

祝学习愉快~