响应式 3 列 CSS，左右固定，流体中心答案

【问题标题】：Responsive 3 column CSS, fixed left and right with fluid center响应式 3 列 CSS，左右固定，流体中心
【发布时间】：2015-07-05 09:29:40
【问题描述】：

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

我可以通过显示表格和表格单元格来做到这一点，或者我可以通过更改 HTML 中列的顺序来做到这一点，但这两者都会使我的响应式布局复杂化 - 1024px 以下的第 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>

我怎样才能使这个固定的左侧、流体中心、固定右侧没有显示表并且不对列重新排序？

建议的答案使用显示表或更改源顺序，我不想这样做。

【问题讨论】：

How to have a 3 column layout with fixed left/right, fluid middle and fixed footer? 的可能重复项
你可以看这里：stackoverflow.com/questions/12489909/…
答案是指更改源顺序或使用我不想使用的显示表
我的第一个问题是：为什么这么复杂的布局？看起来很糟糕的用户体验？
怎么样？有 3 列，外部 2 列是固定的 - 随着屏幕变小，流体中间列变得太小而无法使用，所以最初，我想将右列移动到中间列下方，给中间足够的空间（它变成 2然后列），然后当它再次变小时，所有 3 个堆叠成 1 列，所以它们现在每个都有全宽？

标签： css responsive-design multiple-columns

【解决方案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;
        }
    }

【讨论】：