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

2019/08/30 CSS

如何实现水平方向上box均等分布局?

使用text-align: justify方式

<style>
.justify {
  text-align: justify;
}
.justify::after {
  position: relative;
  display: inline-block;
  content: '';
  width: 100%;
}
.justify i {
  width: 24px;
  line-height: 24px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  color: white;
  background-color: black;
}
</style>

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

参考链接

搜索

    目录

    更多最新信息,欢迎关注公众号

    👇🏻

    公众号二维码
    扫码关注「前端知识总结」公众号