1

これは以前に多くの回答があったと確信していますが、私が見つけることができるのは、左側に固定列、右側に動的列を必要とするソリューションだけです。私の状況は、左側に動的列が必要で、右側に固定列が必要であるという点で異なります。

私はこれを機能させていますが、左 (動的サイズ) 列内に追加の列を構築しようとするとすぐに、右 (固定幅) 列の下に落ち、ページの幅全体を埋めます。

私が実際に必要としているのは、動的な列が固定された右側の列に侵入しないことです。

さらに、左と右の列が固定されている左側の動的列に 3 つの列の別のセットが必要ですが、中央は使用可能な残りのスペース (前述の左側の動的列内) の 100% を使用します。

簡単に言えば、ページ上に 2 つの列が必要で、それらの間でページ幅の 100% を使用し、右側の列は固定幅です。左の列の内側には、外側の固定列を無視する固定列と動的列も必要です。

以下のコード例では、黒い境界線を持つ div をページの右側に接着し、幅を固定する必要があります。赤い境界線の div は、黒い境界線の div よりもページの右側に移動してはならず、緑とオレンジの境界線の div は、赤い境界線の全幅にする必要があります。緑の境界線を持つ div の中央の div は、緑の境界線のある div の左右の列の間のすべての利用可能なスペースを使用する必要があります。

私は以下に持っているコードを入れました

<div id="Wrapper" style="width: 100%;">
<div id="Container">

    <div id="right" style="border: solid 10px black; width: 300px; margin-left: 50px; float: right;">
        Fixed right hand column
    </div>

    <div id="left"  style="border: solid 10px red;">
        <div>
            <div style="border: solid 10px green; float: left;">
                <div style="border: solid 1px black; text-align: center; width: 150px; margin-right: 10px; float: left;">
                    Left
                </div>
                <div style="border: solid 1px black; text-align: center; width: 150px; margin-left: 10px; float: right;">
                    Right
                </div>
                <div style="border: solid 1px black; text-align: center; width: 100%;">
                    Centre
                </div>
            </div>
            <div style="clear: both;"></div>
            <div style="border: solid 10px orange;">
                <asp:Panel runat="server" ID="DynamicWidthPanelForLeftColumn" BackColor="#6699ff" Height="250px">
                    This panel should use just the left column but instead uses the entire width of the page.
                </asp:Panel>
            </div>
        </div>
    </div>
</div>

4

1 に答える 1

3

float:left#leftの内側の div から削除し、左右の divdisplay:table-cellの両方に追加します。

<div style="border: solid 10px green; display:table-cell">
....
</div>

デモ

于 2013-03-01T12:22:56.783 に答える