内容长度不同的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; 高度自动且不可拉伸

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/46838.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

轻量级自适用商城卡密发卡源码(可运营)

一款全开源非常好看的发卡源码。轻量级自适应个人自助发卡简介&#xff0c;这是一款二次开发的发卡平台源码修复原版bug,删除无用的代码。所有文件全部解密&#xff0c;只保留后台版权信息内容。大家放心使用&#xff0c;可以用于商业运营。轻量级自适应个人自助发卡。 源码下…

R语言学习笔记7-列表

R语言学习笔记7-列表 列表(list)介绍空列表包含元素的列表嵌套列表访问列表元素添加新元素删除元素修改元素使用for循环遍历列表使用lapply遍历和操作列表使用sapply简化列表操作合并列表检查元素是否存在列表长度和名称操作将列表转换为其他数据类型列表与环境的交互列表在函数…

写python代码,怎么用工厂模式思维设计接口?

接口的好处 接口就是抽象方法&#xff0c;用来设计后架构&#xff0c;后端开发者和客户端调用者都可以使用这个接口规则同步写代码&#xff0c;客户端调用者&#xff08;app、网页甚至时自动化接口测试&#xff09;不用担心后端对接口的实现细节具体是什么样子的。直接去调用就…

QTimer::singleShot()

QTimer::singleShot() 是 Qt 框架中的一个静态函数&#xff0c;用于创建一个单次定时器事件。它的作用是在指定的时间间隔之后触发一个单次的定时器事件&#xff0c;然后停止定时器。 其函数原型为&#xff1a; static void QTimer::singleShot(int msec, const QObject *rec…

获取欧洲时报中国板块前新闻数据(多线程版)

这里写目录标题 一.数据获取流程二.获取主页面数据并提取出文章url三.获取文章详情页的数据并提取整体代码展示 一.数据获取流程 我们首先通过抓包就能够找到我们所需数据的api 这里一共有五个参数其中只有第一个和第五个参数是变化的第一个参数就是第几页第五个是一个由时…

STM32学习和实践笔记(40):DS18B20温度传感器实验

1.DS18B20介绍 DS18B20 是由 DALLAS 半导体公司推出的一种的“一线总线(单总线)”接口的温度传感器。与传统的热敏电阻等测温元件相比,它是一种新型的体积小、适用电压宽、与微处理器接口简单的数字化温度传感器。 DS18B20温度传感器具有如下特点: 1、适应电压范围更宽,…

Spring 的核心注解

Spring框架使用了一系列的核心注解来支持其功能&#xff0c;以下是一些最常用的Spring注解&#xff1a; 1. Component: - 用于标记类为Spring组件&#xff0c;Spring容器会管理这些类的对象。 2. Service: - 特定于服务层的Component注解&#xff0c;表示一个服务组件。…

Qt 多窗体、复用窗口的使用

1.继承自QWidge的窗口的呈现&#xff0c;作为tabPage呈现&#xff0c;作为独立窗口呈现 2.继承自QMainWindow的窗口的呈现&#xff0c;作为abPage呈现&#xff0c;作为独立窗口呈现 1. 继承自QWidge的窗口的呈现 1.1 作为tabPage呈现 void MutiWindowExample::on_actWidgetI…

分项加载页面统计数据

我们在做一个统计页面时&#xff0c;原来大约有1000万左右的数据进行查询&#xff0c;还可以接受&#xff0c;但是随着业务量的增大&#xff0c;目前有3000多万的数据来统计&#xff0c;一次统计出查询结果就很慢很慢&#xff0c;有时候会出现超时异常。 为了解决这个问题&…

云计算数据中心(一)

目录 一、云数据中心的特征二、云数据中心网络部署&#xff08;一&#xff09;改进型树结构&#xff08;二&#xff09;递归层次结构&#xff08;三&#xff09;光交换网络&#xff08;四&#xff09;无线数据中心网络&#xff08;五&#xff09;软件定义网络 一、云数据中心的…

Briefcase:将Python项目转化为多平台应用的利器

文章目录 引言官网链接原理基础使用安装 Briefcase初始化项目构建应用创建应用包 高级使用应用程序配置和定制化与打包工具的集成自动处理依赖关系 优缺点优点缺点 总结 引言 Briefcase 是一个功能强大的工具&#xff0c;主要用于将 Python 项目转化为多种平台的独立本地应用。…

java 项目使用 acitiviti 流程引擎中的人员设置

学习目标&#xff1a; 目标 [ ]了解 java 项目使用 acitiviti 流程引擎中的人员设置 知识小记&#xff1a; - [x] 1、人员选择说明 - [x] 2、分配任务候选人 任务的候选人是指有权限对该任务进行操作的潜在用户群体&#xff0c;这个用户群体有权限处理(处理、完成)该任务…

最多可以派出多少支球队

最多可以派出多少支球队 解决“最多可以派出多少支球队”的问题需要准确理解题目要求&#xff0c;选择合适的算法&#xff08;如贪心算法和双指针技术&#xff09;&#xff0c;并注意对原始数据进行适当的预处理&#xff08;如排序&#xff09;。在编程实现过程中&#xff0c;有…

MySQL索引重要知识点

1.什么是索引&#xff1f; 索引在项目中是比较常见的&#xff0c;它是帮助MySQL高效获取数据的数据结构&#xff0c;主要是用来提高数据检索的效率&#xff0c;降低数据库的I0成本&#xff0c;同时通过索引列对数据进行排序&#xff0c;降低数据排序的成本&#xff0c;也能降低…

Vue2中的进度条案例

v-bind对于样式控制的增强--操作style 语法&#xff1a; :style “样式对象” 适用于某个具体属性的动态设置 <div class"box" :style"{css属性名1:css属性值,css属性名2:css属性值}"></div> <!DOCTYPE html> <html lang"en&…

java.sql.SQLException: Unknown system variable ‘query_cache_size‘【Pyspark】

1、问题描述 学习SparkSql中&#xff0c;将spark中dataframe数据结构保存为jdbc的格式并提交到本地的mysql中&#xff0c;相关代码见文章末尾。 运行代码时报出相关配置文件错误&#xff0c;如下。 根据该报错&#xff0c;发现网络上多数解决方都是基于java开发的解决方案&a…

uniapp字符串转base64,无需导入依赖(多端支持)

使用示例 import { Base64Encode, Base64Decode } from "@/utils/base64.js" base64.js const _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";export const Base64Encode = (text)

网络准入控制设备是什么?有哪些?网络准入设备臻品优选

小李&#xff1a;“小张&#xff0c;最近公司网络频繁遭遇外部攻击&#xff0c;我们得加强一下网络安全了。” 小张&#xff1a;“是啊&#xff0c;我听说实施网络准入控制是个不错的选择。但具体什么是网络准入控制设备&#xff1f;我们有哪些选择呢&#xff1f;” 小李微笑…

linux文件处理----学习记录

cat file1 file2 >> combined_filefile1 file2会依次加到指定的文件后面 查看文件里有多少行&#xff1a;wc -l filename 搜索某个文件里面是否包含字符串&#xff1a; grep "search-content" filename 打印偶数行内容&#xff1a; awk NR%20 test.txt 循…

iredmail服务器安装步骤详解!如何做配置?

iredmail服务器安全性设置指南&#xff1f;怎么升级邮件服务器&#xff1f; iredmail是一个功能强大的邮件服务器解决方案&#xff0c;它集成了多个开源软件&#xff0c;使您能够快速部署和管理邮件服务。AokSend将逐步引导您完成安装过程&#xff0c;无需深入的编程知识即可轻…