当前位置: 首页 > news >正文

内容长度不同的div如何自动对齐展示

平时我们经常会遇到页面内容div结构相同页,这时为了美观我们会希望div会对齐展示,但当div里的文字长度不一时又不想写固定高度,就会出现div长度长长短短,此时实现样式可以这样写:

 

.e-commerce-Wrap {display: flex;flex-wrap: wrap;
}.e-commerce-Wrap li {min-width: 30%;max-width: 323px;display: flex;flex-direction: column;flex: 1;padding: 24px;margin-top: 16px;margin-right: 16px;box-sizing: border-box;border-radius: 8px;border: 1px solid #F0F0F0;
}.e-commerce-Wrap li:nth-of-type(3n) {margin-right: 0;
}.e-commerce-account {display: flex;
}.e-commerce-account > img {width: 40px;height: 40px;border-radius: 4px;
}.e-commerce-Wrap li h3 {color: #001529;font-weight: bold;
}.e-commerce-Wrap p{max-height: 132px;flex: 1 1 auto;margin-top: 16px;color: #4E5D78;line-height: 22px;text-align: justify;overflow-y: auto;word-break:break-all;
}.e-commerce-install em,
.e-commerce-dev * {font-size: 12px;color: #A8A8A8;
}.e-commerce-install em {margin-right: 8px;
}.e-commerce-install em + em {border-left: 1px solid #EDECF3;padding-left: 8px;
}.e-commerce-dev {display: flex;
}.forCancelBtn {flex: 0 0 auto;text-align: center;
}
<ul class="e-commerce-Wrap"><li name="SHOPYY"><div class="e-commerce-account"><img src="../../asset/images/settings/channel/Ecommerce/SHOPYY.png"><div class="ml16"><h3>SHOPYY</h3><span class="e-commerce-install"><em>应用市场安装</em><em>自定义脚本安装</em></span></div></div><p>适合长期运营的精品独立站。无论您是跨境SOHO、小额批发商、传统实体平台卖家、营销专家等,SHOPYY 都能满足。</p><dl class="e-commerce-dev mt8"><dt>开发商:</dt><dd>SHOPYY</dd></dl><div class="forCancelBtn mt16" data-type="SHOPYY">立即安装</div></li><li name="LeadongShop"><div class="e-commerce-account"><img src="../../asset/images/settings/channel/Ecommerce/LeadongShop.png"><div class="ml16"><h3>LeadongShop</h3><span class="e-commerce-install"><em>自定义脚本安装</em></span></div></div><p>一站式跨境电商独立站 SaaS服务平台,集云端建站、库存管理、多渠道营销销售等功能和技术资源于一体的完善生态系统,为中国的跨境批发商、制造商、品牌商提供B2C独立站建设运营以及DTC品牌出海解决方案。</p><dl class="e-commerce-dev mt8"><dt>开发商:</dt><dd>LeadongShop</dd></dl><div class="forCancelBtn mt16" data-type="LeadongShop">立即安装</div></li>
</ul>

 重点:

一、  li 不设固定高度,高度自动,flex 垂直布局

二、  li中的其他元素高度基本相同无差异,唯独简介内容不统一,所以简介内容样式添加

flex: 1 1 auto; 让其可自动调节与其他li中p元素 高度基本保持一致,若担心其他元素被拉伸,可在其样式上添加 flex: 0 0 auto; 高度自动且不可拉伸

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • C/C++蓝屏整人代码
  • npm install时报错 reason: certificate has expired
  • PCB(印制电路板)制造涉及的常规设备
  • 阿里云DSW实例中安装并运行Neo4J
  • 万界星空科技MES系统生产计划管理的功能
  • JAVASE-医疗管理系统项目总结
  • 【力扣】最小栈
  • 【Unity C#基础】浅谈List底层逻辑
  • npm相关指令
  • 现场可重构CPLD芯片应用案例—蓝牙音箱
  • PHP 与 1688 详情 API 接口的完美对接
  • UE4-初见虚幻引擎
  • java包装类 及其缓存
  • 浏览器的缓存
  • PyCharm软件初始化配置
  • 《剑指offer》分解让复杂问题更简单
  • CSS 提示工具(Tooltip)
  • Docker 1.12实践:Docker Service、Stack与分布式应用捆绑包
  • IDEA常用插件整理
  • JavaScript/HTML5图表开发工具JavaScript Charts v3.19.6发布【附下载】
  • JavaScript函数式编程(一)
  • Mybatis初体验
  • Otto开发初探——微服务依赖管理新利器
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • python学习笔记-类对象的信息
  • text-decoration与color属性
  • TypeScript实现数据结构(一)栈,队列,链表
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • vue总结
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 聚类分析——Kmeans
  • 那些年我们用过的显示性能指标
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 小程序开发中的那些坑
  • #Lua:Lua调用C++生成的DLL库
  • #QT(QCharts绘制曲线)
  • #知识分享#笔记#学习方法
  • $ is not function   和JQUERY 命名 冲突的解说 Jquer问题 (
  • (07)Hive——窗口函数详解
  • (1)常见O(n^2)排序算法解析
  • (20050108)又读《平凡的世界》
  • (2022 CVPR) Unbiased Teacher v2
  • (4) PIVOT 和 UPIVOT 的使用
  • (day6) 319. 灯泡开关
  • (补)B+树一些思想
  • (二)正点原子I.MX6ULL u-boot移植
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (续)使用Django搭建一个完整的项目(Centos7+Nginx)
  • (转)IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
  • (转)关于pipe()的详细解析
  • *p++,*(p++),*++p,(*p)++区别?
  • .net 7 上传文件踩坑
  • .NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions
  • .NET 事件模型教程(二)
  • .NET牛人应该知道些什么(2):中级.NET开发人员