0

列として機能する可変数の div があり、可変数の div に静的な幅 (ピクセル単位) を設定し、可変数の div をウィンドウの残りの幅に拡張したいと考えています。流動的な列の幅を 100% に組み合わせると、一部の列が行から押し出されます。流動的な列のウィンドウ幅の割合を決定するために、javascript を使用して静的な列の幅を差し引く必要がありますか?使用できる css 属性はありますか?

変数とは、流動列または静的列の数が事前にわからないことを意味するため、ビルド済みの 2 列または 3 列のテンプレートを使用できません。

これが私が意味することの例です：

<スタイル>
    #ColumnContainer > div { display:inline-block }
</style>

<div id="カラムコンテナ">
    <div style="width:200px"></div>
    <div class="FluidColumn"></div>
    <div class="FluidColumn"></div>
    <div style="width:100px"></div>
    <div class="FluidColumn"></div>
</div>

<スクリプト>
    /*
        これをする必要がありますか...

        1. ウィンドウ幅を取得する
        2.「FluidColumn」クラスなしで #ColumnContainer 内のすべての div の幅を追加します
        3. ウィンドウ幅から静的幅の合計を引きます。
        4. この残りの幅を「FluidColumn」クラスの div 数で割る
        5.「FluidColumn」クラスを使用して、div の幅をパーセンテージで設定します
    */
</script>

<スタイル>
    // または...

    .FluidColumn { 幅: ??? } // これを解決する特別な width 属性はありますか?
</style>
4

2 に答える 2

1

問題は、変数という単語にあります。ここでこの記事を見てください：http：//www.alistapart.com/articles/holygrail/

それが説明しているのは、2つの固定幅と1つの幅の列の場合です。これを考えると、必要な数の固定幅と可変幅の列を含むレイアウトを作成できるはずです。

ただし、常に制限があり、使用する列が多すぎると、スタイルシートが乱雑になる可能性があります。ここで変数が厳密に何を意味するのかをより詳細に説明して、私たちがあなたをより良く助けることができるようにしてみませんか？

編集

あなたの場合、答えは確かにノーです、あなたはJavascriptを使わなければなりません。サーバー側で動的にスタイルを生成したり、を使用したりするなど、他の可能性もありますがdisplay: table、これらのいずれにも使用しないことをお勧めします。それらは非常に面倒で、保守が困難です。ここでJavascriptを使用すると、流体カラムの比率と幅をより柔軟に決定できます。

于 2010-09-09T00:50:04.473 に答える
1

誰かが興味を持っている場合に備えて、これが私が作成したスクリプトです。

<script type="text/javascript">
    関数 vSetFluidColumnWidths() {
        var _iStaticColumnsWidth = 0;
        $("#ColumnGrid .StaticColumn").each(function(i) { _iStaticColumnsWidth += $(this).width(); });
        var _iFluidColmnWidth = ($("#ColumnGrid").width()-_iStaticColumnsWidth)/$("#ColumnGrid .FluidColumn").length;
        $("#ColumnGrid .FluidColumn").each(function(i) { $(this).width(_iFluidColmnWidth); });
    }
    $(document).ready(function() { vSetFluidColumnWidths(); });
    $(window).resize(function() { vSetFluidColumnWidths(); });
</script>
于 2010-09-09T01:56:37.227 に答える