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

Posted 2020-08-15

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 就可以轻松实现多列均匀布局了。