0

私は 3 列の全幅ページを作成していますが、固定幅の 2 つの列が必要で、もう 1 つの列はそれらの間に全幅に収まるようにします。

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

ありがとうございました

4

2 に答える 2

0

左の列 (mainSidebar) が固定されているため、列 2 (mainPage) の開始点がわかります...次に、jQuery を使用して幅 (または他の css) を設定します... Rov に同意 - CSS はないと思いますさまざまな画面に対応できるため、jQuery / Javascript を使用するのが最適です。

于 2013-07-03T17:40:51.097 に答える
0

この Jquery ソリューションを試してください。

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

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

于 2013-07-03T16:51:14.543 に答える