jquery - 调整大小时，同级 div 跳转到新行

Question

我正在创建 3 行，每行有 4 列。但我想要实现的是，当 1 调整一行中任何列的大小时，其余列应根据行的总剩余宽度调整大小。假设如果行的总宽度为 100%，并且如果我将第一列的大小调整 60%，则剩余的三列应根据剩余的 40% 调整大小。正如在我的 html 中一样，它不会调整剩余列的大小。

这是我的代码。

<div id="data-1">
            <div class="row" style="width:100%;">
            <div class="column" style="float: left; overflow: hidden; min-width: 25%;"></div>
            <div class="column" style="min-width: 25%; float: left; overflow: hidden;"></div>
            <div class="column" style="min-width: 25%;float: left; overflow: hidden;"></div>
            <div class="column" style="min-width: 25%;float: left; overflow: hidden;"></div>
            </div>
            <div class="row" style="width:100%;">
            <div class="column" style="float: left; overflow: hidden; min-width: 25%;"></div>
            <div class="column" style="min-width: 25%; float: left; overflow: hidden;"></div>
            <div class="column" style="min-width: 25%;float: left; overflow: hidden;"></div>
            <div class="column" style="min-width: 25%;float: left; overflow: hidden;"></div>
            </div>
            <div class="row" style="width:100%;">
            <div class="column" style="float: left; overflow: hidden; min-width: 25%;"></div>
            <div class="column" style="min-width: 25%; float: left; overflow: hidden;"></div>
            <div class="column" style="min-width: 25%;float: left; overflow: hidden;"></div>
            <div class="column" style="min-width: 25%;float: left; overflow: hidden;"></div>
            </div>
</div>

据此我得到以下结构:

但是当我调整一列的大小时，我得到了这个:

我想在调整大小时实现这一点:

Answer 1

习惯了CSS 媒体查询 和

display table 和display table-cell 像这样

CSS

  .row{
    display:table;
    width:100%;
}
.column{
    display:table-cell;
    height:20px;
    border:solid 1px red;
}


@media all and (max-width: 500px) {
    #data-1 .row:first-child> .column:first-child{width:60%;}
}

HTML

<div id="data-1">
            <div class="row" ">
            <div class="column" ></div>
            <div class="column" ></div>
            <div class="column" ></div>
            <div class="column" ></div>
            </div>
            <div class="row" ">
            <div class="column" ></div>
            <div class="column" ></div>
            <div class="column" ></div>
            <div class="column" ></div>
            </div>
            <div class="row" ">
            <div class="column" ></div>
            <div class="column" ></div>
            <div class="column" ></div>
            <div class="column" ></div>
            </div>
</div>

Demo

more info about media queries