可以使用CSS的伪元素来模拟等距填充的效果,同时也考虑到包含换行文本的情况。下面是示例代码:
HTML代码:
<div class="container">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus dolor in augue pharetra, ut gravida dolor sodales. Sed at odio eu odio euismod efficitur. Curabitur facilisis ultrices enim, ut aliquet justo malesuada non. Donec porta ligula vitae ex feugiat, id congue ex vestibulum. Ut vel leo aliquet, vulputate lacus sed, dapibus velit. Fusce imperdiet, augue in auctor convallis, elit libero eleifend nisi, sit amet egestas lectus nibh sit amet nunc.</div>
<div class="item">Ut ut aliquam nisi, ac luctus tellus. Duis eget arcu at enim venenatis aliquam. Maecenas semper neque et massa malesuada vestibulum. Duis non imperdiet risus, ac vehicula velit. Phasellus nec molestie sapien. Morbi et pretium nisi.</div>
<div class="item">Nunc condimentum quam ac arcu cursus, vel efficitur tortor cursus. Morbi euismod mi eget quam fringilla, at malesuada lectus dapibus. Donec auctor magna ac eleifend imperdiet. Sed faucibus, nunc non pharetra mattis, elit nunc consectetur ex, ut vulputate lectus felis ac turpis. Aliquam massa urna, gravida a tempus ac, maximus vel odio.</div>
</div>
CSS代码:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
position: relative;
margin: 10px; /* 设置每个项目的margin */
padding: 20px; /* 设置每个项目的padding */
flex-basis: calc(33.33% - 20px * 2); /* 设置每个项目的宽度,