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>

根据这个我得到以下结构：

enter image description here

但是当我调整一列时，我得到了这个：

enter image description here

我希望在调整大小时实现这一目标：

enter image description here

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

调整大小时，兄弟姐妹会跳到新线

1 个答案: