css如何实现兼容性的元素不确定多少的情况下两端对齐？

Question

如上图的小方块（或者是文字标题）不确定多少，要实现两端对齐的效果？
虽然css3可以实现效果，但是我的页面是用在pc端的，不知道有什么好的方法？

Answer 1

可以借助text-align:justify和伪元素实现

<div class="container">
        <div class="justify">
            <i>1</i>
            <i>2</i>
            <i>3</i>
            <i>4</i>
             <!--[if lte IE 7]>
            <b></b><![endif]--><!-- 兼容不支持伪元素的 ie678 -->
        </div>
    </div>

.container {
            width: 200px;
            height: 40px;
            line-height: 40px;
            background-color: #999;
        }
        .justify {
            text-align: justify;
        }
        .justify i {
            display: inline-block;
            width:24px;
            line-height: 24px;
            border:1px solid #333;
            font-style: normal;
            text-align: center;
        }
        .justify:after{
            content: "";
        }

        .justify:after,.justify b {
            display:inline-block;
            position:relative;
            width:100%;

            z-index:-1;
            *zoom:1;
        }

Answer 2

css3有个flex属性，你可以试试

Answer 3

要使用Js了.是一道数学题.用Offset来计算.

Answer 4

要么就你自己先确定好你的栅格系统，然后请求到数据条目知道有多少个元素，给相应的class，用不同的class进行定位

Answer 5

flex 布局
可以去看下
http://www.ruanyifeng.com/blo...