内容长度不同的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.rhkb.cn/news/379704.html

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

相关文章

WebSocket、服务器推送技术

WebSocket 是一种在单个 TCP 连接上进行 全双工 通信的协议&#xff0c;它可以让客户端和服务器之间进行实时的双向通信&#xff0c;且不存在同源策略限制 WebSocket 使用一个长连接&#xff0c;在客户端和服务器之间保持持久的连接&#xff0c;从而可以实时地发送和接收数据…

基于JAVA+SpringBoot+uniapp的心理小程序(小程序版本)

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、SpringCloud、Layui、Echarts图表、Nodejs、爬…

如何在web页面下做自动化测试?

自动化测试是在软件开发中非常重要的一环&#xff0c;它可以提高测试效率并减少错误率。在web页面下进行自动化测试&#xff0c;可以帮助我们验证网页的功能和交互&#xff0c;并确保它们在不同浏览器和平台上的一致性。本文将从零开始&#xff0c;详细介绍如何在web页面下进行…

网络安全防御【防火墙双机热备带宽管理综合实验】

目录 一、实验拓扑图 二、实验要求 三、实验思路&#xff1a; 四、实验步骤&#xff1a; 1、FW3的网络相关配置&#xff1a; 2、FW1的新增配置&#xff1a; 3、交换机LSW6&#xff08;总公司&#xff09;的新增配置&#xff1a; 4、双机热备技术配置&#xff08;双机热…

【数据结构】链表(LinkedList)详解

文章目录 [toc] 前言1. 链表的介绍1.1 链表的定义1.2 链表的结构种类 2. 单向链表的模拟实现2.1 创建链表2.2 打印链表2.3 求链表长度 3. 单向链表常见方法的模拟实现3.1 头插法3.2 尾插法3.3 指定位置插入3.4 查找值 key 的节点是否在链表中3.5 删除值为 key 的节点3.6 删除所…

实验三:图像的平滑滤波

目录 一、实验目的 二、实验原理 1. 空域平滑滤波 2. 椒盐噪声的处理 三、实验内容 四、源程序和结果 (1) 主程序&#xff08;matlab&#xff09; (2) 函数GrayscaleFilter (3) 函数MeanKernel (4) 函数MedFilter 五、结果分析 1. 空域平滑滤波 2. 椒盐噪声的处理…

小阿轩yx-zookeeper+kafka群集

小阿轩yx-zookeeperkafka群集 消息队列(Message Queue) 是分布式系统中重要的组件 通用的使用场景可以简单地描述为 当不需要立即获得结果&#xff0c;但是并发量又需要进行控制的时候&#xff0c;差不多就是需要使用消息队列的时候。 消息队列 什么是消息队列 消息(Mes…

使用Docker 实现 MySQL 循环复制(二)

系列文章 使用Docker 实现 MySQL 循环复制&#xff08;一&#xff09; 目录 系列文章1. 创建三个 mysql 容器1.1 准备三个 mysql 容器的挂载卷1.2 为三个mysql实例创建配置文件1.3 修改各目录的权限以满足 mysql 容器的要求1.4 创建 docker-compose.yaml 文件1.5 创建容器 1. …

多源字段聚合重塑算法

要求如下 [[{"oone": "评估是否聘请第三方机构","otwo": null,"othree": "test",},{"oone": "评估是否聘请第三方机构","otwo": null,"othree": "test",}],[{"oon…

npm安装依赖包报错,npm ERR! code ENOTFOUND

一、报错现象&#xff1a; npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://registry.npmjs.org/vue failed, reason: connect ETIMEDOUT 104.16.23.35:443 npm WARN registry Using stale data…

GitHub私有派生仓库(fork仓库) | 派生仓库改为私有

GitHub私有派生仓库 前言解决方案 前言 在GitHub上Fork的派生仓库默认为公有仓库&#xff0c;且无法修改为私有仓库。 若想创建私有的派生仓库&#xff0c;可通过GitHub的导入仓库功能实现&#xff0c;具体步骤请参见下文解决方案。 解决方案 打开GitHub页面&#xff0c;在个…

新书速览|深入理解Hive:从基础到高阶:视频教学版

《深入理解Hive&#xff1a;从基础到高阶&#xff1a;视频教学版》 本书内容 《深入理解Hive:从基础到高阶:视频教学版》采用“理论实战”的形式编写&#xff0c;通过大量的实例&#xff0c;结合作者多年一线开发实战经验&#xff0c;全面地介绍Hive的使用方法。《深入理解Hiv…

UE5.4新功能 - MotionDesign上手简介

MotionDesign是UE中集成的运动图形功能&#xff0c;我们在游戏中经常会见到&#xff0c;例如前方漂浮于空中的若干碎石&#xff0c;当玩家走进时碎石自动吸附合并变成一条路&#xff0c;或者一些装饰性的物件做随机运动等等&#xff0c;在引擎没有集成运动图形时&#xff0c;这…

【Hive SQL 每日一题】找出各个商品销售额的中位数

文章目录 测试数据需求说明需求实现方法1 —— 升序计算法方法2 —— 正反排序法 补充 测试数据 -- 创建 orders 表 DROP TABLE IF EXISTS orders; CREATE TABLE orders (order_id INT,product_id INT,order_date STRING,amount DOUBLE );-- 插入 orders 数据 INSERT INTO ord…

【JVM基础01】——介绍-初识JVM运行流程

目录 1- 引言&#xff1a;初识JVM1-1 JVM是什么&#xff1f;(What)1-1-1 概念1-1-2 优点 1-2 为什么学习JVM?(Why) 2- 核心&#xff1a;JVM工作的原理&#xff08;How&#xff09;⭐2-1 JVM 的组成部分及工作流程2-2 学习侧重点 3- 小结(知识点大纲)&#xff1a;3-1 JVM 组成3…

Stable Diffusion:质量高画风清新细节丰富的二次元大模型二次元插图

今天和大家分享一个基于Pony模型训练的二次元模型&#xff1a;二次元插图。关于该模型有4个不同的分支版本。 1.5版本&#xff1a;loar模型&#xff0c;推荐底模型niji-动漫二次元4.5。 xl版本&#xff1a;SDXL模型版本 mix版本&#xff1a;光影减弱&#xff0c;减少SDXL版本…

【Docker】Docker-compose 单机容器集群编排工具

目录 一.Docker-compose 概述 1.容器编排管理与传统的容器管理的区别 2.docker-compose 作用 3.docker-compose 本质 4.docker-compose 的三大概念 二.YML文件格式及编写注意事项 1.yml文件是什么 2.yml问价使用注意事项 3.yml文件的基本数据结构 三.Docker-compose …

C语言学习笔记[25]:循环语句for

for循环 for循环的基本语法 for(表达式1;表达式2;表达式3)循环语句; 表达式1为初始化部分&#xff0c;用于初始化循环变量的。 表达式2为条件判断部分&#xff0c;用于判断循环何时终止。 表达式3为调整部分&#xff0c;用于循环条件的调整。 例如用for循环实现打印1~10的数字…

DROO论文笔记

推荐文章DROO源码及论文学习 读论文《Deep Reinforcement Learning for Online Computation Offloading in Wireless Powered Mobile-Edge Computing Networks》的笔记 论文地址&#xff1a;用于无线移动边缘计算网络在线计算卸载的深度强化学习 论文代码地址&#xff1a;DR…

[论文笔记] CT数据配比方法论——1、Motivation

我正在写这方面的论文,感兴趣的可以和我一起讨论!!!!!! Motivation 1、探测原有模型的配比: 配比 与 ppl, loss, bpw, benchmark等指标 之间的关系。 2、效果稳定的配比:配比 与 模型效果 之间的规律。 Experiments 1、主语言(什么语言作为主语言,几种主语言?…