CSS:关于display:flex与white-space: nowrap的问题

2024-01-06 14:08

本文主要是介绍CSS:关于display:flex与white-space: nowrap的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题再现:

目前做一个列表页,具体结构如下:

html:

        <div class="listItem"><div class="pic"><img src=""> </div><div class="info"><div class="name">通天大补丸</div><div class="desc">活血化瘀,美容养颜,延缓衰老,抗风抗压....</div><div class="time">截止日期:2018-12-12</div></div><div class="btnbox"><div class="btn">兑换</div></div></div>

css:

.listpage .listItem{ overflow: hidden; width: 100%; padding: 0.8rem; box-sizing: border-box; border-bottom: 1px solid #e5e5e5; display: flex;}
.listpage .listItem .pic{ flex: 0 0 3rem; height: 3rem; overflow: hidden; border-radius: 50%; background-color: #999}
.listpage .listItem .pic img{ display: block; width: 100%; height: 100%;}
.listpage .listItem .info{ flex: 1; margin: 0 0.8rem;}
.listpage .listItem .name{ font-size: 0.8rem; color: #333;}
.listpage .listItem .desc{ width: 100%; font-size: 0.7rem; color: #666; line-height: 1rem; height: 1rem; margin: 0.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.listpage .listItem .time{ font-size: 0.7rem; color: #999;}
.listpage .listItem .btnbox{ flex: 0 0 2.5rem;}
.listpage .listItem .btnbox .btn{ width: 100%; height: 1.5rem; text-align: center; background-color: #999; border-radius: 4px; line-height: 1.5rem; color: #fff; position: relative; top: 50%; transform: translateY(-50%)}
.listpage .listItem.active .btnbox .btn{ background-color: forestgreen;}

结果:

发现右边的按钮被顶出去了,通过排除,是white-space: nowrap与display:flex发生矛盾,解决方法:

.listpage .listItem .info{ flex: 1; margin: 0 0.8rem;min-width: 0;}

给类名.desc的父级.info添加一个min-width:0即可解决

 

这篇关于CSS:关于display:flex与white-space: nowrap的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/576589

相关文章

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源

MySQL启动报错:InnoDB表空间丢失问题及解决方法

《MySQL启动报错:InnoDB表空间丢失问题及解决方法》在启动MySQL时,遇到了InnoDB:Tablespace5975wasnotfound,该错误表明MySQL在启动过程中无法找到指定的s... 目录mysql 启动报错:InnoDB 表空间丢失问题及解决方法错误分析解决方案1. 启用 inno

Java使用MethodHandle来替代反射,提高性能问题

《Java使用MethodHandle来替代反射,提高性能问题》:本文主要介绍Java使用MethodHandle来替代反射,提高性能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录一、认识MethodHandle1、简介2、使用方式3、与反射的区别二、示例1、基本使用2、(重要)

电脑蓝牙连不上怎么办? 5 招教你轻松修复Mac蓝牙连接问题的技巧

《电脑蓝牙连不上怎么办?5招教你轻松修复Mac蓝牙连接问题的技巧》蓝牙连接问题是一些Mac用户经常遇到的常见问题之一,在本文章中,我们将提供一些有用的提示和技巧,帮助您解决可能出现的蓝牙连接问... 蓝牙作为一种流行的无线技术,已经成为我们连接各种设备的重要工具。在 MAC 上,你可以根据自己的需求,轻松地

Java 中的跨域问题解决方法

《Java中的跨域问题解决方法》跨域问题本质上是浏览器的一种安全机制,与Java本身无关,但Java后端开发者需要理解其来源以便正确解决,下面给大家介绍Java中的跨域问题解决方法,感兴趣的朋友一起... 目录1、Java 中跨域问题的来源1.1. 浏览器同源策略(Same-Origin Policy)1.

如何清理MySQL中的binlog问题

《如何清理MySQL中的binlog问题》:本文主要介绍清理MySQL中的binlog问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目http://www.chinasem.cn录清理mysql中的binlog1.查看binlog过期时间2. 修改binlog过期

如何解决yum无法安装epel-release的问题

《如何解决yum无法安装epel-release的问题》:本文主要介绍如何解决yum无法安装epel-release的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录yum无法安装epel-release尝试了第一种方法第二种方法(我就是用这种方法解决的)总结yum

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

IDEA下"File is read-only"可能原因分析及"找不到或无法加载主类"的问题

《IDEA下Fileisread-only可能原因分析及找不到或无法加载主类的问题》:本文主要介绍IDEA下Fileisread-only可能原因分析及找不到或无法加载主类的问题,具有很好的参... 目录1.File is read-only”可能原因2.“找不到或无法加载主类”问题的解决总结1.File