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

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日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改