jquery - 中柱流体宽度

Question

我有 3 列布局。我正在尝试使中间列的宽度可变，左右列的宽度固定为 200px。 它在我的屏幕上看起来不错，但是当我调整浏览器窗口大小时，右栏在较小的窗口大小上下降。

CSS:

#content {
    float: left;
    width: 66.8%;
}
#sidebar-left {
    float: left;
    margin-right: 24px;
    width: 200px;
}
#sidebar-right {
    float: right;
    width: 200px;
}

Answer 1

这种布局的一个简单选择是使用 display: table 路线:

.wrap {
    display: table; 
    margin: 0 auto;
}

.wrap > div {
    display: table-cell; 
    height: 200px; 
    background: green;
    width: 66%;
}

#sidebar-left, #sidebar-right {
    width: 200px; 
    background: red;
}