两列布局，固定右列

Question

我被一个看似简单的两列 CSS 布局所困扰。通常这种布局很简单，但我正在构建一个响应式网站，并且需要将列以正确的移动顺序折叠在一起。

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

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

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

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

我是一名经验丰富的开发人员，我认为完成这项工作应该更简单？

Answer 1

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

.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/

Answer 2

选项 1：

您可以使用绝对定位、边距和框大小来实现您要查找的内容。有关示例，请参阅此 JSFiddle，代码如下。只需将左列的边距、右列的宽度和断点更改为适合您的目的。

HTML：

<div class="wrap">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS：

.wrap {
    position: relative;
}

.left {
    -webkit-box-sizing: border-box;
    -moz-box-sixing: border-box;
    box-sizing: border-box;
    margin-right: 60px;
    background-color: green;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    background-color: red;
}

@media only screen and (max-width: 500px){
    .left {
        margin: 0;
    }
    
    .right {
        width: auto;
        position: static;
    }
}

---

选项 2：

See this option，使用 calc() 作为左列的宽度，并在 wrap 上使用 clearfix，我们可以使用带有固定右列的浮动列，它将下推下面的内容它。

HTML：

<div class="wrap">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right with a ton of content
    </div>
</div>
Here's some pushed down content

CSS：

.wrap {
    position: relative;
}

.left {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: calc(100% - 60px);
    background-color: green;
}

.right {
    float: right;
    width: 50px;
    background-color: red;
}

@media only screen and (max-width: 500px){
    .left {
        width: auto;
        float: none;
    }
    
    .right {
        float: none;
        width: auto;
        position: static;
    }
}

.wrap:before,
.wrap:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.wrap:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.wrap {
    *zoom: 1;
}

Answer 3

我不确定您是从头开始构建这个响应式网站，还是使用 Twitter Bootstrap 等库来构建，这是我的第一个问题。

其次，如果 table-cell 选项在除 Firefox 之外的所有设备上运行良好，您可以使用此处找到的答案编写一些 Mozilla 特定的 CSS： mozilla specific css

这将允许您只为 FireFox 调整 CSS。这里还有很多 FF 特定的 CSS 扩展： https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions

Answer 4

一个可能性是<div class="visible-xs"> 所以你按照你想要的方式构建你的东西​​，然后在移动设备的情况下使用它。不推荐=D