jquery - 固定和可变列宽（表格或浮动）？

Question

我正在创建一个 3 列全宽页面，但我希望 2 列具有固定宽度，而另一列将适合它们之间的全宽，如下所示：

| Fixed Width || Variable Width                || Fixed Width        |
| Always Left || Adapts To Browser Window Size || Always Fixed Right |

我用 float 尝试了它，但它不起作用，然后有人建议使用 display-table ，直到我不得不稍微编辑页面。现在右手栏没问题，但左两栏的内容在底部，而不是在需要的顶部。谁能帮忙解决这个问题。这是我正在使用的代码：

    .pageContent{
        background-color: #DADEE1;
        width: 100%;
        padding: 10px 0px 10px 0px;
    }
    .gridSystem{
        display: table;
    }
    section{
        display: table-cell;
    }
    .mainSidebar{
        float: left;
        vertical-align: top;
        width: 140px;
    }
    .mainPage{
        width: inherit;
        overflow: hidden;
        margin: 0px 0px 0px 0px;
        padding: 20px;
    }
    .mainAdvert{
        float: right;
        width: 140px;
    }

<div class="pageContent gridSystem">
    <section class="mainSidebar"></section>
    <section class="mainPage"></section>
    <section class="mainAdvert"></section>
    <div class="clearBoth"></div>
</div>

谢谢

Answer 1

试试这个 Jquery 解决方案：

$(document).ready(function(){
    window_width = $(window).width;
    mainPage_width = window_width - 140 - 140; 
    $(".mainPage").width = mainPage_width + "px";    
}

http://jsfiddle.net/_rov/zBF3j/

Answer 2

因为左列（mainSidebar）是固定的，你知道第2列（mainPage）开始的点......然后使用jQuery设置宽度（或任何其他css）......同意Rov - 我不认为CSS可以考虑各种屏幕 - 所以最好使用 jQuery / Javascript。