这个等分布局怎么实现

clipboard.png
求教!!!
css小白 需要具体的code

---------- 华丽的分隔线
感谢所有回答过flex和兼容性问题的大佬!~

阅读 5.3k
9 个回答
ul {display: flex;justify-content: space-between;}

关于兼容,传送门

要兼容的话用text-align: justify;吧,ie7ok

        .justify{
                text-align: justify;
                text-justify: inter-ideograph;
            }
            .justify i{
               width:24px;
                line-height:24px;        
                height: 24px;
                display:inline-block;                                             
                background:#333;
                text-align:center;
                color:white;
                border-radius:50%;
                overflow: hidden;
                font-style: normal;
            }
            .justify:after{
                content: '';
                width: 100%;
                position: relative;
                display: inline-block;                
            }
            .justify b{
                display: inline-block;
                position:relative;
                height:0px;                
                width:100%;                        
            }

    <div class="justify">
            <i>1</i>
            <i>2</i>
            <i>3</i>
            <i>4</i>
            <i>5</i>         
            <!--[if lte IE 7]>
            <b></b>
            <![endif]-->
        </div>

flex布局

分别给这四个加上一个class="col-md-3"

使用table实现布局,demo: 链接描述

最后一项,可以不用after伪元素,换成html元素;

父集

{  
   display: flex;
   display: -webkit-flex; /* Safari */
   justify-content: space-between;
}

看了一下目前的答案,心中想到,大家都是好人。告诉了题主使用 flex 布局方式来处理。

所以,我要做坏人,请问,你这个要兼容什么浏览器啊?

要兼容性好的话,用margin呗,小圆的左右间距设置为定值,然后用其父类的子类选择器,干掉第一个的左间距,最后一个点右间距

flex 百分比 grid 都可以

推荐问题
宣传栏