首页 > 代码库 > 全兼容的多列均匀布局问题
全兼容的多列均匀布局问题
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
就可以轻松实现多列均匀布局了。
全兼容的多列均匀布局问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。