需求:正常情况下
宽度超出时:
实现:文章来源地址https://www.toymoban.com/news/detail-631434.html
<templete>
<div class="jieduanbox">
<div v-for="(item, index) in stageList" :key="index" style="display: inline-block">
.......
</div>
<div class="rightBtn">
<el-button
icon="el-icon-plus"
/>
</div>
<div>
</templete>
.jieduanbox {
display: flex;
align-items: center;
overflow-x: auto; /* 当内容超出时显示横向滚动条 */
overflow-y: hidden;
}
.rightBtn{
flex-shrink: 0; /* 防止右侧内容缩小 */
position: sticky;
right: 0;
}
文章来源:https://www.toymoban.com/news/detail-631434.html
到了这里,关于css实现,正常情况下div从左到右一次排列,宽度超出时,右侧最后一个div固定住,左侧其他div滚动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!