会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132359个问题
Python 全系列/第十五阶段:Python 爬虫开发/爬虫基础 2057楼
Python 全系列/第一阶段:Python入门/面向对象 2058楼
Python 全系列/第一阶段:Python入门/面向对象 2059楼
Python 全系列/第一阶段:Python入门/面向对象 2060楼
Python 全系列/第十五阶段:Python 爬虫开发/爬虫基础 2062楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 2063楼
Python 全系列/第十五阶段:Python 爬虫开发/爬虫基础 2064楼

f12b394549e1f18515f373951e659fb.png

Python 全系列/第十五阶段:Python 爬虫开发/爬虫基础 2065楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        margin: 0 auto;
        
    }

    .container{
        width: 1200px;
        background-color: rgb(173, 151, 200);
        margin:20px auto;
        padding-bottom: 10px;
        border-radius: 20px;
        
    }

    .t-box{
        display: flex;
        width: 1160px;
        height: 50px;
        align-items: center;
        justify-content: flex-start;
    }

    .b-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 1160px;
        height: 150px;
        background-color: white;
        border-radius: 20px;
        background-attachment: scroll; /*左右滚动*/
        
        
    }
    
    .rs{
        font-weight:800;
        font-size: larger;
        color: rgb(25, 24, 34);
        margin-left: 13px;
       
        
    }
    
    .rs span{
        padding-left: 15px;
        font-size: medium;
        font-family: "楷体";
    }

    .btn{
        margin-right: 15px;
        border-radius: 25px;
        padding: 5px 10px;
        border: none;
        letter-spacing: 2px;
        color: rgb(92, 80, 118);
    }

    .t-txt,.b-txt{
        display: flex;
        align-items: center;
        justify-content: space-around;
        white-space: nowrap;
        height: 70px;
        width: 1150px;
        border: 1px solid;
        /* white-space: nowrap; */
        background-attachment: auto; /*左右滚动*/
        
    }

    .b-box .txt{
        
        line-height: 70px;
        box-sizing: border-box; /*依旧变形*/
        width: 100px;
        height: 45px;
        background-color: rgb(173, 151, 200);
        margin-right: 10px;
        
    }


   </style>
</head>
<body>
   
    <div class="container">
        <div class="t-box">
            <p class="rs">粉丝热搜<span>大家都在看</span></p>  
            <button class="btn">查看全部 ❥</button>      
        </div>
        <div class="b-box">
            <div class="t-txt">
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
            </div>
            <div class="b-txt">
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
            </div>
           
        </div>
    </div>

</body>
</html>

如上,底部内容位置里面有好多小盒子,我想让超出部分横向滚动,但是好像不行,添加新的盒子其他盒子就会挤压变形平分区域没法超出屏幕横向滚动。请老师指点我该怎么写

WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 2066楼
Python 全系列/第二十三阶段:人工智能基础_机器学习理论与实战/KNN与交叉检验 2069楼
Python 全系列/第一阶段:Python入门/编程基本概念 2070楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637