天津谁做网站,想做个网站 在哪买域名和空间,在线登录qq邮箱网页版官网,濮阳做网站设计平时我们经常会遇到页面内容div结构相同页#xff0c;这时为了美观我们会希望div会对齐展示#xff0c;但当div里的文字长度不一时又不想写固定高度#xff0c;就会出现div长度长长短短#xff0c;此时实现样式可以这样写#xff1a; .e-commerce-Wrap {display: flex;fle… 平时我们经常会遇到页面内容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 classe-commerce-Wrapli nameSHOPYYdiv classe-commerce-accountimg src../../asset/images/settings/channel/Ecommerce/SHOPYY.pngdiv classml16h3SHOPYY/h3span classe-commerce-installem应用市场安装/emem自定义脚本安装/em/span/div/divp适合长期运营的精品独立站。无论您是跨境SOHO、小额批发商、传统实体平台卖家、营销专家等SHOPYY 都能满足。/pdl classe-commerce-dev mt8dt开发商/dtddSHOPYY/dd/dldiv classforCancelBtn mt16 data-typeSHOPYY立即安装/div/lili nameLeadongShopdiv classe-commerce-accountimg src../../asset/images/settings/channel/Ecommerce/LeadongShop.pngdiv classml16h3LeadongShop/h3span classe-commerce-installem自定义脚本安装/em/span/div/divp一站式跨境电商独立站 SaaS服务平台集云端建站、库存管理、多渠道营销销售等功能和技术资源于一体的完善生态系统为中国的跨境批发商、制造商、品牌商提供B2C独立站建设运营以及DTC品牌出海解决方案。/pdl classe-commerce-dev mt8dt开发商/dtddLeadongShop/dd/dldiv classforCancelBtn mt16 data-typeLeadongShop立即安装/div/li
/ul 重点
一、 li 不设固定高度高度自动flex 垂直布局
二、 li中的其他元素高度基本相同无差异唯独简介内容不统一所以简介内容样式添加
flex: 1 1 auto; 让其可自动调节与其他li中p元素 高度基本保持一致若担心其他元素被拉伸可在其样式上添加 flex: 0 0 auto; 高度自动且不可拉伸
