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

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 MATLAB动图输出问题
  • ¥50 python如何用抖音这个接口输入抖音ID查询用户信息
  • ¥30 关于移动Web网页使用TinyMCE富文本编辑器上传图片后的光标定位、压缩等几个问题如何解决:
  • ¥25 activeMq在同服务器centos8下消费很慢
  • ¥20 为什么zynq CAN IP 无法进入config配置模式,XCan_SelfTest函数失效?
  • ¥15 Pycharm中程序直接运行可以但进入调试报错
  • ¥15 MATLAB动图问题
  • ¥15 有段代码不知道怎么理解,const isToken = (config.headers || {}).isToken === false
  • ¥15 我的显卡支持CUDA最高版本是12.3,这个版本也支持VS 2022 17.0这种情况下如果我想下载CUDA11.8,需要下载旧版本的VS2022吗
  • ¥15 pointnet2包安装