当前位置：首页 > news >正文

内容长度不同的div如何自动对齐展示

news 2025/7/28 14:38:44

平时我们经常会遇到页面内容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>