css - 如何通过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;
}

FIDDLE