内容长度不同的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;可以用于商业运营。轻量级自适应个人自助发卡。 源码下…

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

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

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

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

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

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

云计算数据中心(一)

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

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;也能降低…

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;” 小李微笑…

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

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

AI智能名片在Web 3.0技术栈中的应用与前景研究

摘要&#xff1a;在Web 3.0的浪潮中&#xff0c;AI智能名片作为一种创新的数字工具&#xff0c;正逐步渗透到商业交流的各个层面。本文深入探讨了AI智能名片在Web 3.0技术栈中的具体应用&#xff0c;详细分析了其背后的技术支撑、应用场景、优势以及面临的挑战。通过案例分析、…

A Survey on Multimodal Large Language Models综述

论文题目:A Survey on Multimodal Large Language Models 论文地址:https://arxiv.org/pdf/2306.13549 话题:多模态LLMs综述 MLLMs Paper: https://github.com/BradyFU/Awesome-Multimodal-Large-Language-Models 1. 摘要 近期,以GPT-4V为代表的跨模态大型语言模型(MLLM…

Java版【植物大战僵尸+源码】

上期回顾&#xff1a; 今天给大家推荐一个Gtihub开源项目&#xff1a;PythonPlantsVsZombies&#xff0c;翻译成中就是植物大战僵尸。 《植物大战僵尸》是一款极富策略性的小游戏。可怕的僵尸即将入侵&#xff0c;每种僵尸都有不同的特点&#xff0c;例如铁桶僵尸拥有极强的抗…

用 LLM 构建企业专属的用户助手

TL;DR 本文主要介绍了 PingCAP 如何使用大型语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09;构建一个搭载企业专属知识库的智能客服机器人。除了采用行业内通行的基于知识库的问题解答方法&#xff0c;我们还尝试让模型在“小样本&#xff08;Few-Shot&…

Leetcode 100361100367.切割蛋糕的最小总开销

Medium&#xff1a;动态规划搜索&#xff08;实际就是优化后的dfs&#xff09; class Solution { public: int f[25][25][25][25] {0};int dp(int row1, int col1, int row2, int col2, vector<int>& horizontalCut, vector<int>& verticalCut){if(row1 …

Autosar RTE配置-Assembly和Delegation的使用-基于ETAS软件

文章目录 前言Assembly和Delegation的含义Delegation的使用Assembly的使用总结 前言 RTE中的Compostion内部的SWC之间的连接使用Assembly Connector进行连接。这样的连接一般都是一个SWC的Pport对应另一个SWC的Rport。而Autosar软件中往往不只一个Composition(一般可以以核的数…

Ubuntu的磁盘扩容遇到的问题

1.先用终端上的命令查看磁盘的使用情况 #查看磁盘空间容量的占用情况 $ df -h #查看当前文件夹中&#xff0c;各个文件占用磁盘空间的情况 $ du -sh* 如果容量少的话&#xff0c;需要尽快扩容 2.开机前的扩容 2.1 VMware 扩展磁盘空间 关闭当前客户机&#xff0c;在编辑虚拟…

第三季度加密市场动荡:市场缺乏炒作题材,波动加剧

摘要 根据 Arkham 的数据&#xff0c;德国政府联邦刑事调查局 (BKA) 可能已完成抛售&#xff0c;其持有量从 6 月中旬的约 50,000 BTC&#xff08;35.5 亿美元&#xff09;减少到 7 月 12 日的数据为 0 BTC。市场担忧美国经济在今年晚些时候或 2025 年初陷入衰退&#xff0c;导…