带固定列的css流体布局

Question

我想要一个流体内容列和固定宽度的侧边栏。如果浏览器调整大小并且内容列变小，则媒体查询会将边栏放在内容下面。这里

OK是我@jsfiddle

...的CSS：

section { 
    width: 100%; 
} 
#wrap { 
    margin: 0 auto; 
    max-width: 600px; 
    width: 100%; 
} 
#col1 { 
    float: left; 
    width: 200px; 
    height: 100px; 
    background: lightgreen; 
} 
#col2 { 
    width: 100%; 
    height: 100px; 
    background: lightblue; 
} 
@media only screen and (max-width: 400px) { 
    #col1 { 
     float: none; 
     width: 100%; 
    } 
} 

... HTML：

<section> 
    <div id="wrap"> 
     <div id="col1"></div> 
     <div id="col2"></div> 
    </div> 
</section> 

我知道，这是完全倒过来。我想col2有一个固定的宽度，并在右侧。如果我将浮点值更改为“右”，col1将位于右侧，这是错误的。如果我交换＃col1和＃col2的所有值，col2将出现在col1下面，这也不是我的意图。 由于浏览器支持有限，我无法使用弹性盒。

我该如何解决这个问题？

Thx提前！

Answer 1

好的。我发现一个相当不错的解决方案：http://jsfiddle.net/yyAFq/

与表和表格单元格。完美的浏览器支持！

section { 
    width: 100%; 
} 
#wrap { 
    margin: 0 auto; 
    max-width: 600px; 
    width: 100%; 
    display: table; 
} 
#col1 { 
    width: 100%; 
    height: 100px; 
    background: lightblue; 
    display: table-cell; 
} 
#col2 { 
    width: 200px; 
    height: 100px; 
    background: lightgreen; 
} 
h1 { 
    height: 40px; 
    width: 50px; 
    background: red; 
} 
h1, p { 
    display: inline-block; 
    vertical-align: bottom; 
} 
p { 
    display: inline-table; 
    width: 100%; 
} 
@media only screen and (max-width: 400px) { 
    #col1 { 
     display: block; 
    } 
    #col2 { 
     width: 100%; 
    } 
} 

Answer 2

嗯，这是我的解决方案...

http://jsfiddle.net/x5fb4/2/

它你想要做什么，但我用了一个“JavaScript的媒体查询” - 这是说我检查屏幕尺寸JavaScript和调整接着就，随即。

#col1 { 
//width added at runtime by javascript (see jsfiddle) 
display:inline-block; 
height: 100px; 
background: lightblue; 
}