Question

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

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

我尝试使用浮动，但没有工作，然后有人建议使用显示表，直到我不得不稍微编辑页面。现在右边的列已经可以了，但是左边的2列在底部有内容，而不是在顶部需要的位置。任何人都可以帮助这个。这是我正在使用的代码：

    .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。

固定和可变列宽（表格或浮点数）？

2 个答案: