让多个div块排列在一行而不会出现因浏览器宽度不够换行的情况
- 示例代码
<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>
- 运行情况