两列布局，固定右列 [英] Two column layout, fixed right column

问题描述

我遇到了一个看似简单的两列CSS布局。通常这种布局很简单，但我正在建立一个响应式网站，需要列以正确的顺序倒塌在移动，在彼此之上。

在桌面上需要将右列固定大小，比如说200像素，剩下的区域被左列占用。自然，我需要这些列来清除并推送以下的内容。

在移动设备上，他们只是堆叠。

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

我甚至看了显示表和表单元格，这大部分工作相对较好，但不幸的是，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; 
} 
  

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

I am stuck with a seemly simple two column CSS layout. Typically this layout is simple but I am building a responsive site and need the columns to collapse in the correct order for mobile, on top of each other.

On desktop, I need the right column to be fixed size, say 200px and the rest of the area to be taken up by the left column. Naturally I need the columns to clear and push content below down.

On mobile, they would just stack. So the left column is above the right column.

As mentioned before, this type of layout is usually accomplished simply by floating one of the columns and/or setting large margins, but this approach requires the left and right to be swapped in the document flow and would make the collapsed mobile version impossible.

I have even looked at display table and table-cell, this works relatively well for the most part, but unfortunately FireFox does not support absolute positioned elements within the layout breaking some of the content within.

I'm a seasoned developer, surly accomplishing this should be simpler that I am finding?

解决方案

Not a very elegant solution, but its working. They key is to wrap the contents of the left column and add a margin-right equal to the width of the right column / sidebar. On the right column, set the width and a negative margin-left equal to its width.

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

Here's a working fiddle http://jsfiddle.net/heyapo/9Z363/

这篇关于两列布局，固定右列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！