内容长度不同的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.mfbz.cn/a/800174.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用Copilot 高效开发繁忙的一天

在现代软件开发的世界里&#xff0c;使用AI工具如GitHub Copilot可以显著提高开发效率。 早晨&#xff1a;规划与启动 7:00 AM - 起床与准备 开发者早早起床&#xff0c;享用健康的早餐&#xff0c;并浏览新闻和技术博客&#xff0c;了解最新的科技动态。快速整理思路&#x…

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

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

Uniapp自定义动态加载组件(2024.7更新)

1.本次介绍如何使用uniapp实现自定义动态加载Loading的组件&#xff0c;可以gif格式&#xff0c;也可以mp4格式等; 编写自定义Loading组件(CustomLoader.vue)&#xff1b;组件中含有“动态接收图片路径”&#xff0c;“10秒超时未false则自动断开关闭Loading”&#xff1b;在全…

设计模式学习(二)工厂模式——抽象工厂模式+注册表

设计模式学习&#xff08;二&#xff09;工厂模式——抽象工厂模式注册表 前言使用简单工厂改进使用注册表改进参考文章 前言 在上一篇文章中我们提到了抽象工厂模式初版代码的一些缺点&#xff1a;①客户端违反开闭原则②提供方违反开闭原则。本文将针对这两点进行讨论 使用…

三级_网络技术_17_交换机及其配置

1.下面是一台三层交换机的部分路由表信息。根据表中的路由信息&#xff0c;以下描述错误的是()。 此设备启用了OSPF动态路由协议&#xff0c;并学到了E1和E2两种类型的OSPF外部路由 比设备通过动态路由协议得到缺省路由&#xff0c;下一跳是设备的TenGigabitEthernet1/15接口 …

Django prefetch_related()方法

prefetch_related的作用 prefetch_related()是 Django ORM 中用于优化查询性能的另一个重要方法&#xff0c;尤其在处理多对多&#xff08;ManyToMany&#xff09;关系和反向关系时非常有用。它允许你预加载相关对象&#xff0c;从而减少数据库查询次数。 1&#xff0c;创建应…

技术成神之路:设计模式(七)状态模式

1.介绍 状态模式&#xff08;State Pattern&#xff09;是一种行为设计模式&#xff0c;它允许一个对象在其内部状态改变时改变其行为。这个模式将状态的相关行为封装在独立的状态类中&#xff0c;并将不同状态之间的转换逻辑分离开来。 2.主要作用 状态模式的主要作用是让一个…

16001.WSL2 ubuntu20.04 编译安装 vsomeip

文章目录 1 vsomeip 编译安装1.1 vsomeip的安装1.2 编译提示错误1.3 编译hello_world示例1.4 运行服务器端 1 vsomeip 编译安装 1.1 vsomeip的安装 参考博文 https://blog.csdn.net/peterwanye/article/details/128386539 1.2 编译提示错误 ubuntu1-BJ-EE1000042:~/opt/vso…

科研绘图系列:R语言分组散点图(grouped scatter plot)

介绍 分组连线散点图是一种高效的数据可视化手段,它通过在散点图上添加线条来明确展示数据点的分组情况。这种图形能够显著地突出不同组之间的差异,为读者提供了一种直观且易于理解的方式来识别数据的聚类结构。相较于传统的散点图,分组连线散点图在展示数据分组信息方面更…

linux centos limits.conf 修改错误,无法登陆问题修复 centos7.9

一、问题描述 由于修改/etc/security/limits.conf这个文件中的值不当&#xff0c;重启后会导致其账户无法远程登录&#xff0c;本机登录。 如改成这样《错误示范》&#xff1a; 会出现&#xff1a; 二、解决 现在知道是由于修改limits.conf文件不当造成的&#xff0c;那么就…

MyBatis框架学习笔记(四):动态SQL语句、映射关系和缓存

1 动态 SQL 语句-更复杂的查询业务需求 1.1 动态 SQL-官方文档 &#xff08;1&#xff09;文档地址: mybatis – MyBatis 3 | 动态 SQL &#xff08;2&#xff09;为什么需要动态 SQL 动态 SQL 是 MyBatis 的强大特性之一 使用 JDBC 或其它类似的框架&#xff0c;根据不同条…

PHP多功能投票微信小程序系统源码

&#x1f389;一键决策&#xff0c;尽在掌握&#xff01;多功能投票小程序&#xff0c;让选择不再纠结&#x1f914; &#x1f4f2;【开篇&#xff1a;告别传统&#xff0c;拥抱便捷投票新时代】&#x1f4f2; 还在为组织投票活动手忙脚乱&#xff1f;或是面对众多选项犹豫不…

数据库:编程(打开、操作(增、删、改、查)、关闭)

一、需要的头文件 sqlite3.h 二、编译过程 gcc xxx -lsqlite3 三、编程框架 打开数据库 》读写数据库(增&#xff0c;删&#xff0c;改&#xff0c;查) 》关闭数据库 3.1 打开数据库&#xff1a; sqlite3_open int sqlite3_open(char * path,sqlite3 ** db); 功能&…

无人机之机架类型篇

碳纤维机架 具有低密度、高强度和高刚度的特点&#xff0c;非常适合商业或工业级无人机的设计。碳纤维机架在飞行过程中具有良好的减振效果&#xff0c;使飞行更加稳定&#xff0c;但制作工艺复杂&#xff0c;成本较高。 工程塑料机架 以其轻便、耐冲击和易加工等特点受到一…

SpringCloud | 单体商城项目拆分(微服务)

为什么要进行微服务拆分&#xff1f; 在平常的商城项目中&#xff0c;我们一般的项目结构模块都是将各种业务放在同一个项目文件夹&#xff0c;比如像&#xff1a; 用户&#xff0c;购物车&#xff0c;商品&#xff0c;订单&#xff0c;支付等业务都是放在一起&#xff0c;这样…

SpringBoot以及swagger的基本使用

1、SpringBoot是什么&#xff1f; 一种快速开发、启动Spring的框架、脚手架 遵循“约定优于配置”的思想&#xff0c;使得能够快速创建和配置Spring应用 2、SpringBoot的核心特性 自动配置&#xff0c;一些依赖、默认配置都预设好了&#xff0c;减少了配置量起步依赖&#x…

Docker的安装【虚拟机】

Docker的安装【虚拟机】 1、查看是否含有旧版本 yum list installed|grep docker2、安装docker仓库 yum -y install yum-utils3、设置docker仓库 # 清理 yum 的所有缓存 yum clean all # 更新并生成 yum 软件仓库的元数据缓存&#xff0c;确保系统使用的软件信息是最新的 y…

ASP.NET MVC-制作可排序的表格组件-PagedList版

环境&#xff1a; win10 参考&#xff1a; 学习ASP.NET MVC(十一)——分页 - DotNet菜园 - 博客园 https://www.cnblogs.com/chillsrc/p/6554697.html ASP.NET MVCEF框架实现分页_ef 异步分页-CSDN博客 https://blog.csdn.net/qq_40052237/article/details/106599528 本文略去…

嵌入式linux相机 框图

摄像头读取数据显示到LCD流程 重点&#xff1a;摄像头数据&#xff08;yuyv&#xff0c;mjpeg&#xff0c;rgb&#xff09;&#xff08;640,320&#xff09;与LCD显示数据&#xff08;RGB&#xff09;&#xff08;480&#xff0c;240&#xff09;不同&#xff1b;需要转换&…

数据结构——考研笔记(三)线性表之单链表

文章目录 2.3 单链表2.3.1 知识总览2.3.2 什么是单链表2.3.3 不带头结点的单链表2.3.4 带头结点的单链表2.3.5 不带头结点 VS 带头结点2.3.6 知识回顾与重要考点2.3.7 单链表的插入和删除2.3.7.1 按位序插入&#xff08;带头结点&#xff09;2.3.7.2 按位序插入&#xff08;不带…