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/

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这样的库来实现这一点，这将是我的第一个问题。

其次，如果表单元格选项在除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

两列布局，固定右列

4 个答案:

选项1：

选项2：