克里斯别关门 2021-10-30 11:31 采纳率: 80%
浏览 120
已结题

flex弹性盒子子元素溢出 拖动浏览器 缩小后a元素跑出来了 求解

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body,a,p{
                margin: 0;padding: 0;
                
            }
            .box{
                max-width: 1100px;
                min-width: 830px;
                height: 320px;
                margin: auto;
                display: -webkit-flex;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;
                
                
            }
            .box a{
                display: block;width: 200px;height: 150px;border-radius: 10px;overflow: hidden;text-decoration: none;
                box-shadow: 0 0 3px;
                
            }
            .box a img{
                width: 200px;height: 120px;
                
            }
            .box a p{
                width: 200px;height: 30px;line-height: 30px;font-weight: 400;
                text-align: center;color: black;
                
            }
        </style>
    </head>
    <body>
        <div class="box">
            <a href="#">
                <img src="img/1.jpg" >
                <p>我要自学网1</p>
            </a>
            <a href="#">
                <img src="img/2.jpg" >
                <p>我要自学网2</p>
            </a>
            <a href="#">
                <img src="img/3.jpg" >
                <p>我要自学网3</p>
            </a>
            <a href="#">
                <img src="img/4.jpg" >
                <p>我要自学网4</p>
            </a>
            <a href="#">
                <img src="img/5.jpg" >
                <p>我要自学网5</p>
            </a>
            <a href="#">
                <img src="img/6.jpg" >
                <p>我要自学网6</p>
            </a>
            <a href="#">
                <img src="img/7.jpg" >
                <p>我要自学网7</p>
            </a>
            <a href="#">
                <img src="img/8.jpg" >
                <p>我要自学网8</p>
            </a>
            <a href="#">
                <img src="img/9.jpg" >
                <p>我要自学网9</p>
            </a>
            <a href="#">
                <img src="img/10.jpg" >
                <p>我要自学网10</p>
            </a>
            
        </div>
    </body>
</html>

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/002165465536147.jpg "=600 #left")
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/662965465536171.jpg "=600 #left")
  • 写回答

3条回答 默认 最新

  • MafiaboyYang 2021-10-30 12:03
    关注

    flex wrap 就是这样的，我提供你一种解决方案
    b站的视频自动调整就是用的这种方法，我也是刚学前端一个星期，照着b站做了一个模仿界面，b站源码是这样解决的
    1

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body,a,p{
                margin: 0;padding: 0;
            }
            .box{
                max-width: 1100px;
                min-width: 830px;
                height: 320px;
                margin: auto;
                display: -webkit-flex;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: space-between;
            }
            .box a{
                display: block;width: 200px;height: 150px;border-radius: 10px;overflow: hidden;text-decoration: none;
                box-shadow: 0 0 3px;
            }
            .box a img{
                width: 200px;height: 120px;
            }
            .box a p{
                width: 200px;height: 30px;line-height: 30px;font-weight: 400;
                text-align: center;color: black;
            }
            
            @media screen and (max-width: 1000px){
                .box a:nth-child(n+9){
                    display: none;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网1</p>
            </a>
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网2</p>
            </a>
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网3</p>
            </a>
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网4</p>
            </a>
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网5</p>
            </a>
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网6</p>
            </a>
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网7</p>
            </a>
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网8</p>
            </a>
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网9</p>
            </a>
            <a href="#">
                <img src="vuex.png" >
                <p>我要自学网10</p>
            </a>
        </div>
    </body>
</html>
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/002165465536147.jpg "=600 #left")
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/662965465536171.jpg "=600 #left")
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 11月9日
  • 已采纳回答 11月1日
  • 创建了问题 10月30日

悬赏问题

  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派，无法执行update，如何解决？（相关搜索：软件下载）
  • ¥15 Windows11, backspace, enter, space键失灵
  • ¥15 cfx离心泵非稳态计算