css - 将 col 布局降到 min-width 以下后，将其变为行布局

Question

我想实现下一个结果：我有 2 列，右边的列填充了剩余的宽度。一旦右列低于其最小宽度，它就必须低于左列，左列应填满整个宽度。这可能只使用css吗？

这是我能得到的最接近的值，但它在 FF 中不起作用，并且当 rightcol 低于它时，leftcol 显然保持其最小宽度为 100px。

#leftcol{
    background-color: blue;
    width: 20%;
    min-width: 100px;
    float: left;
}

#rightcol{
    background-color: yellow;
    min-width: 200px;
    overflow:hidden;
}

Answer 1

您正在寻找的是类似于 1140 Grid 系统的东西。

看这里; http://cssgrid.net/

下载并查看演示 - 通过使用媒体查询，您可以根据浏览器的宽度更改行/列的宽度 :-)