根据一行中有多少动态调整列的大小

Question

我正在尝试制作一个根据列数调整大小的响应式列布局。

Link to JsFiddle

HTML：

<div class="row">
<div class="box half">1/2</div>
<div class="box quarter">1/4</div>
<div class="box quarter">1/4</div>
</div>

<div class="row">
<div class="box half">1/2</div>
<div class="box quarter hidden">1/4</div>
<div class="box quarter">1/4</div>
</div>

CSS：

.clearfix:before, .row:before, .clearfix:after, .row:after {
content:" ";
display: table;
}
.clearfix:after, .row:after {
clear: both;
}
.row {
margin-bottom: 20px;
width: 100%;
text-align: left;
}
.row .box {
background: #fff;
-webkit-box-shadow: 0 1px 0 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 0 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 2px rgba(0, 0, 0, 0.1);
float: left;
height: 100px;
}
.row .box.half {
width: 50%;
}
.row .box.quarter {
width: 25%;
}
.hidden {
display: none;
}

所以，我想要做的是，如果我将“隐藏”类添加到其中一个框，其他框将调整大小并填满该行。例如，在第一行中，我们有一列 50% 和两列 25%；如果我隐藏一个 25% 的列，第一列将有 66%，第二列将有 33%。

我必须在不向 html 添加任何其他类的情况下执行此操作并在 IE8+ 中工作。

Answer 1

您可以使用media queries。将此添加到您的样式表中。

@media (max-width: 600px) {
    .row .box.half {
        width: 66%;
    }
    .row .box.quarter {
        width: 33%;
    }
    .row .box.quarter:last-child {
        display: none;
    }
}