帶固定柱的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具有固定的寬度並在右側。 如果我將float值更改為“ right”，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;
}