首页 > 代码库 > 全兼容的多列均匀布局问题

全兼容的多列均匀布局问题

技术分享

html:

<
div class="container"> <div class="justify"> <i>1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i> </div> </div>
css:

.container
{ width:400px; margin:50px auto 0; background:#ddd; } .justify{ position:relative; width:100%; height:24px; text-align: justify; } .justify i{ width:24px; line-height:24px; display:inline-block; text-indent:9px; background:#333; color:white; border-radius:50%; overflow: hidden; font-style: normal; } .justify:after { content: ""; display: inline-block; position: relative; width: 100%; }

通过给伪元素 :after 设置 inline-block 设置宽度 100% ,配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。

全兼容的多列均匀布局问题