根据行中

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;
    }
}