css - 两列布局，固定右列

我坚持使用看似简单的两列 CSS 布局。通常，这种布局很简单，但我正在构建一个响应式站点，并且需要将列以正确的移动顺序折叠起来，并在彼此之上。

在桌面上，我需要右列固定大小，比如 200px，其余区域由左列占据。当然，我需要这些列来清除并将内容向下推送。

在移动设备上，它们只会堆叠。所以左列在右列之上。

如前所述，这种类型的布局通常只需通过 float 一列和/或设置大边距来完成，但这种方法需要在文档流中交换左右两边，并且会使折叠的移动版本变得不可能。

我什至看过显示表格和表格单元格，这在大多数情况下效果相对较好，但不幸的是，FireFox 不支持布局中的绝对定位元素，破坏了其中的一些内容。

我是一名经验丰富的开发人员，完成这件事应该比我发现的更简单吗？

最佳答案

不是一个非常优雅的解决方案，但它的工作原理。他们的关键是包装左列的内容并添加一个等于右列/侧边栏宽度的 margin-right。在右列上，设置宽度和一个负边距-左等于其宽度。

.left {
    float:left;
    width:100%;
    background-color: green;
}
.left-content {
    margin-right:120px;
}
.right {
    float:right;
    width: 120px;
    margin-left: -120px;
    background-color: red;
}

这是一个工作 fiddle
http://jsfiddle.net/heyapo/9Z363/

关于css - 两列布局，固定右列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20532575/