做网站工作条件,想做网站策划怎么做,哪个网站可以做砍价,网站建设的展望 视频前言
在列表排行榜中通常会出现的一个需求#xff1a;从左到右依次是名次、头像、昵称、徽标、分数。徽标可能会有多个或者没有徽标#xff0c;徽标长度是动态的#xff0c;昵称如果过长要随着有无徽标进行动态截断出现省略号。如下图布局所示#xff08;花里胡哨的底色是…
前言
在列表排行榜中通常会出现的一个需求从左到右依次是名次、头像、昵称、徽标、分数。徽标可能会有多个或者没有徽标徽标长度是动态的昵称如果过长要随着有无徽标进行动态截断出现省略号。如下图布局所示花里胡哨的底色是为了看的更清楚咱忍忍。。。 一、实现效果
多个徽标 一个徽标 没有徽标 影响中间文字部分动态截断实现方法
设置昵称和徽标这个整体div的宽度
方法1️⃣昵称部分div设置为 flex-shrink: 1 自动收缩宽度方法2️⃣昵称部分div设置为 flex: 1;min-width: 0
二、结构拆分 使用flex左右布局分数之前为左边分数固定最大长度为右边左边的内容继续使用flex布局排列固定名次、头像宽度昵称和徽标的模块使用flex布局给定一个大概宽度昵称设置截断省略
三、全部代码
1.整体结构
代码如⬇️ !-- 整行 --div classitem-wrapperdiv classitem-leftdiv classitem-left-num1/divimage classitem-left-avatar srcxxx /div classitem-left-textdiv classitem-left-namelemon是我的名字lemon是我的名字lemon是我的/divimage classitem-left-icon item-left-level srcxxx /image classitem-left-icon item-left-fan srcxxx //div/divdiv classitem-right666/div/div
2.css样式
代码如下⬇️
.item-wrapper {width: 100%;height: 62pit;flex: 0 0 auto;overflow: hidden;background-color: gray;padding: 0 16pit;display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}.item-left {overflow: hidden;display: flex;flex-direction: row;align-items: center;justify-content: flex-start;background-color: rgb(139, 201, 237);
}.item-left-num {flex: 0 0 auto;font-family: PingFangSC-Medium;font-size: 20pit;color: #333;font-weight: 700;line-height: 62pit;letter-spacing: 0;width: 26pit;text-align: center;background-color: rgb(225, 131, 197);
}.item-left-avatar {flex: 0 0 auto;width: 38pit;height: 38pit;background-color: #fff;background-repeat: no-repeat;background-position: center center;background-size: cover;border-radius: 36px;margin-left: 8pit;
}.item-left-text {display: flex;flex-direction: row;align-items: center;width: 55vw;background-color: #333;
}.item-left-name {font-family: PingFangSC-Medium;font-weight: 500;font-size: 14pit;line-height: 62pit;color: #333;letter-spacing: 0;margin-left: 8pit;// 方式1️⃣// flex: 1;// min-width: 0;// 方式2️⃣flex-shrink: 1; // 自动收缩宽度overflow: hidden;text-overflow: ellipsis;white-space: nowrap;background-color: aqua;
}.item-left-icon {height: 16pit;background-color: #fff;background-repeat: no-repeat;background-position: center center;background-size: cover;margin-left: 4pit;
}.item-left-level {flex: 0 0 auto;width: 32pit;
}.item-left-fan {flex: 0 0 auto;width: 52pit;
}.item-right {flex: 0 0 auto;font-family: PingFangSC-Medium;font-weight: 400;line-height: 62pit;font-size: 12pit;color: #666;letter-spacing: 0;text-align: right;width: 52pit;margin-left: 16pit;background-color: rgb(240, 171, 229);
}
