5 
<div style="width: 800px; height: 600px">

    <div style="float:left; width: 100px">
        left fixed-width column
    </div>
    <div style="???">
        right stretching column (the width should be 700px in this case.)
    </div>

</div>

左が固定サイズで右が伸縮する 2 列のレイアウトを作成する標準的な方法は何ですか?

  • 両方の列のスタイルが独立していることを望みます。ここでいくつかの解決策を見つけましたが、左の列の幅を変更すると、右の列のスタイル (マージンなど) も一緒に変更する必要があります。

  • 古いブラウザをサポートする必要はありません。スタンダードなものなら大丈夫です。

4

2 に答える 2

2

overflow: hidden2 番目の div に適用します。これにより、新しいブロック フォーマット コンテキストが導入されます。詳細については、Overflow:hidden がレイアウトに影響を与える可能性がありますか?を参照してください。.

jsFiddle デモ

于 2012-05-13T10:06:52.677 に答える
0

div を使用して両方の列をラップすることもできます (必要に応じてブロックとして中央に配置します)。次に、最初の列の幅を設定し、2 番目の列で絶対配置を使用して、左の境界線を最初の列の端にします。そしてその右の境界はラッパーの端です。

<div style="width:auto; min-width:500px; margin:30px; position:relative; top:0px;">

<div style="width:100px; height:100px; padding:15px; background-color:aqua;">
</div>

<div style="height:100px; padding:15px; position:absolute; top:0px; left:100px; right:0px;  background-color:blue;">
</div>

</div>

JSFiddle

于 2014-04-08T21:04:33.167 に答える