Question

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

好的，我有@ 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-value更改为＆＃34; right＆＃34;，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/

它可以满足您的需求，但我使用了＆＃34; javascript媒体查询＆＃34; - 也就是说我使用javascript检查屏幕大小并进行调整。

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

具有固定列的css流体布局

2 个答案: