两列布局,固定右列

Question

我坚持使用一个看似简单的两列CSS布局.通常这种布局很简单,但我正在建立一个响应式网站,并且需要按照正确的移动顺序折叠列,相互叠加.

在桌面上,我需要将正确的列设置为固定大小,例如200px,其余区域将由左列占用.当然,我需要清除列并向下推送内容.

在移动设备上,他们只会叠加.所以左栏位于右栏之上.

如前所述,这种类型的布局通常只需浮动其中一列和/或设置大边距即可完成,但这种方法要求在文档流程中交换左右,并使折叠的移动版本无法实现.

我甚至看过显示表和表格单元格,这在大多数情况下相对较好,但遗憾的是FireFox不支持布局中的绝对定位元素打破其中的一些内容.

我是一个经验丰富的开发人员,乖乖地完成这个应该更简单,我发现？

Answer 1

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

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

这是一个工作小提琴 http://jsfiddle.net/heyapo/9Z363/