具有固定列的 css 流体布局

Question

我想要一个流畅的内容列和一个固定宽度的侧边栏。如果浏览器调整大小并且内容列变小，媒体查询会将侧边栏置于内容下方。

好的，这就是我所拥有的@@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 下方，这也不是我的意图。 由于浏览器支持有限，我无法使用弹性框。

我该如何解决这个问题？

提前谢谢！

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;
}