css - 响应式 3 列 CSS，左右固定，流体居中

Question

我正在尝试创建一个 3 列布局，其中左右两列是固定的，中心是流动的。

我可以用显示表格和表格单元格来做到这一点，或者我可以通过更改 HTML 中的列的顺序来做到这一点，但这两者都会使我的响应式布局复杂化——低于 1024 像素的第 3 列需要隐藏在第 2 列下面，而第 1 列仍然存在照原样，然后在 500 像素以下，所有内容都进入一个垂直列。

此外，每个列的高度都需要是最高列的高度，因为它们会有背景。

假设我有:

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

#middle {
  margin-left:200px;
}

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

<div id="content">
  <div id="left">
    LEFT FIXED
  </div>
  <div id="middle">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tellus vel lorem efficitur ornare. Maecenas sit amet commodo velit, at eleifend est. Cras luctus orci vitae erat maximus rutrum. 
  </div>
  <div id="right">
    RIGHT FIXED
  </div>    
</div>

如何在没有显示表格且不对列重新排序的情况下使这个固定的左侧、流动的中心、固定的右侧？

建议的答案要么使用显示表格，要么使用更改源代码顺序，这两种我都不想这样做。

Answer 1

我添加了“margin-right:200px;”到你的中间 ID，因为文本隐藏在后面。

然后我创建了两个媒体查询来帮助处理您的请求。

CSS:

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