响应式3柱CSS，左右固定，流体中心

我试图创建一个3列布局，其中左右列是固定的，中心是流动的

我可以通过显示表和表格单元格来实现这一点，也可以通过更改HTML中列的顺序来实现，但这两种方式都会使我的响应布局变得复杂-在1024px以下，第3列需要在第2列下折叠，第1列保持原样，然后在500px下，所有内容都进入一个垂直列

此外，每个列的高度必须是最高列的高度，因为它们将具有背景

假设我有：

左{ 宽度：200px； 位置：绝对位置； 排名：0； 左：0； 背景色：红色； 身高：100%； } 中间的{ 左边距：200px； } 对{ 宽度：200px； 位置：绝对位置； 排名：0； 右：0； 背景颜色：蓝色； 身高：100%； } 左固定 Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种有效的方法。梅塞纳坐在埃利芬德东部的艾米特·康莫多·维利特。芦苇。 右固定

---

我加了右边的边距：200px；到中间id，因为文本隐藏在后面

然后，我创建了两个有助于处理您的请求的媒体查询

CSS:

---

您可以在这里查看可能的副本：答案是指更改源顺序或使用显示表，这两者我都不想使用。我的第一个问题是：为什么布局如此复杂？看起来用户体验很糟糕？怎么会这样？有3个柱，外部2个是固定的-随着屏幕变小，流体中间柱变得太小，无法使用，因此，最初，我想把右边的列移到中间列的下面，给中间足够的空间，它变成2列，然后当它再次变小时，所有3个堆栈都变成1列，所以它们现在都是全宽的？

#left {
        width: 200px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: red;
        height: 100%;
    }

    #middle {
        margin-left: 200px;
        margin-right: 200px;
    }

    #right {
        width: 200px;
        position: absolute;
        top: 0;
        right: 0;
        background-color: blue;
        height: 100%;
    }

    @media screen and (max-width:1024px) {
        #right {
            width: 100%;
            margin: 0;
            top: 300px;
            left: 0;
            right: 0;
            height: 100px;
            position: absolute;
        }
        #left,
        #middle {
            height: 300px;
            top: 0;
            position: absolute;
        }
    }

    @media screen and (max-width:500px) {
        #left,
        #right,
        #middle {
            width: 100%;
            margin: 0;
            left: 0;
            right: 0;
            top: 0;
            height: 100px;
            position: relative;
        }
    }