如何通过CSS在一行中的框之间创建相等的空间

Question

我要求一行有4个盒子.

1. 盒子有固定的宽度和高度
2. 但行的宽度将根据屏幕大小而变化.
3. 第一个框应该与行的左边框对齐
4. 最后一个框与右边框对齐.
5. 任何两个盒子之间的空间也应相等.

是否有一种纯粹的CSS方式来实现这一目标？这是jsfiddle code.

HTML:

<div class="row">
    <div class ="col">
        <div class="box"></div>
    </div>
    <div class ="col">
        <div class="box"></div>
    </div>
    <div class ="col">
        <div class="box"></div>
    </div>
    <div class ="col">
        <div class="box"></div>
    </div>
</div>

CSS:

.row {
    display: table;
    border: 1px solid green;
    width: 400px; /* it changes by screen size actually */
    padding: 5px;
}
.row:before, .row:after {
    content: "";
}
.row:after {
    clear: both;
}
.col {
    float: left;
    width: 25%;
}
.box {
    border: 1px solid #DDD;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
.col:first-child .box {
    margin-left: 0;
}
.col:last-child .box {
    margin-right: 0;
}

Answer 1

text-align:justify在容器上使用,这样无论你在div中有多少元素,它都可以工作(你不需要计算每个列表项的%宽度)

更新了CSS

.row {
    text-align: justify;
    min-width: 412px;
    border: 1px solid green;
    width: 80%; /* it changes by screen size actually */
    height: 90px;
    padding: 5px;
}

.row:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.col {
    display: inline-block;
}
.box {
    border: 1px solid #DDD;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

小提琴