如何让多个div块排列在一行而不会出现因浏览器宽度不够换行的情况

让多个div块排列在一行而不会出现因浏览器宽度不够换行的情况

1. 示例代码

<template>
  <div class="home-container">
    <!--左侧大块-->
    <div>
      <p style="width:100%;height:20px;font-size:14px;font-family:PingFangSC-Medium,PingFang SC;
                font-weight:500;color:rgba(255,255,255,1);line-height:20px;
                margin-left: 40px;margin-top: 36px;margin-bottom:16px ">积分数据概览</p>

      <!--有效积分、冻结积分、今日存入积分部分-->
      <!--左侧上小块-->
      <div class="t-ctn">
        <div class="s-ctn">  <!--实现多个div同行排列不因为宽度不够而换行-->
            <!--有效积分-->
            <div style="width:206px;height:120px;background:linear-gradient(314deg,rgba(133,143,247,1) 0%,rgba(102,131,253,1) 100%);
                    border-radius:4px;margin-left: 40px">
               <img src="../../assets/static/icon_有效积分.png" alt="有效积分"
                    style="margin-left: 153px;margin-right: 13px;">
               <p style="width:48px;height:18px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;
                    font-weight:400;color:rgba(255,255,255,1);line-height:18px;margin-left: 16px;margin-bottom: 17px">有效积分</p>

               <span style="width:87px;height:22px;font-size:36px;
                       font-family:DINAlternate-Bold,DINAlternate;
                       font-weight:bold;color:rgba(255,255,255,1);
                       line-height:22px;margin-left: 13px">13395
               <img src="../../assets/static/arrow_right.png" style="margin-left: 14px;margin-bottom: 7px"></span>
            </div>

            <!--冻结积分-->
            <div style="width:206px;height:120px;
                    background:linear-gradient(315deg,rgba(186,155,241,1) 0%,rgba(137,125,242,1) 100%);
                    border-radius:4px;margin-left: 19px">
                <img src="../../assets/static/icon_冻结积分.png" alt="积分冻结"
                     style="margin-left: 153px;margin-right: 13px;">
                <p style="width:48px;height:18px;font-size:12px;
                          font-family:PingFangSC-Regular,PingFang SC;font-weight:400;
                          color:rgba(255,255,255,1);line-height:18px;margin-left: 16px;margin-bottom: 17px">冻结积分</p>
                <span style="width:52px;height:22px;font-size:36px;font-family:DINAlternate-Bold,DINAlternate;
                             font-weight:bold;color:rgba(255,255,255,1);
                             line-height:22px;margin-left: 13px">281</span>
            </div>

            <!--今日存入积分-->
            <div style="width:206px;height:120px;
                        background:linear-gradient(315deg,rgba(252,197,135,1) 0%,rgba(242,134,160,1) 100%);
                        border-radius:4px;margin-left: 19px">
                 <img src="../../assets/static/icon_今日存入积分.png" alt="今日存入积分"
                      style="margin-left: 153px;margin-right: 13px">
                 <p style="width:72px;height:18px;font-size:12px;
                           font-family:PingFangSC-Regular,PingFang SC;
                           font-weight:400;color:rgba(255,255,255,1);
                           line-height:18px;margin-left: 16px;margin-bottom: 17px">今日存入积分</p>
                 <span style="width:70px;height:22px;font-size:36px;
                              font-family:DINAlternate-Bold,DINAlternate;
                              font-weight:bold;color:rgba(255,255,255,1);
                              line-height:22px;margin-left: 13px">1209</span>
            </div>

        </div>
      </div>

      <!--左侧下小块表格块-->
    </div>

    <!--右侧大块-->
    <div>

    </div>
   </div>
</template>
<script>
</script>
<style>
  .home-container {
    width: 100%;
    height: 100%;
    background-color:#2d3a4b;
    overflow: hidden;
    position: fixed;
  }
  /*左侧大块的上小块：有效积分、冻结积分、今日存入积分部分*/
  *{
    margin: 0;
    padding: 0;
  }

  .t-ctn {
    width: 100%;
    overflow-x: auto;
  }

  .t-ctn .s-ctn {
    height: 150px;
    white-space: nowrap;
    font-size: 0;
  }

  .t-ctn .s-ctn div {
    font-size: 14px;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    display: inline-block;
    width: 200px;
    height: 100%;
  }
  /*左侧大块的上小块：有效积分、冻结积分、今日存入积分部分*/
</style>

2. 运行情况