0

3 つの列を並べて配置しています。1 つは左側のモジュール パネルとして左側に、もう 1 つはコンテンツ列として中央に、もう 1 つは右側のモジュール パネルとして右側にあります。

CSS:

#left{
    width: 20%;
    float: left;
}

#right{
    width: 25%;
    float: right;
}

#content{
    width: 55%;
    float: right;
}

HTML

<div id="right">
   some module
</div>
<div id="content">
   some content
</div>
<div id="left">
   some module
</div>

今: id='left' で div を削除すると、コンテンツ div は 55% の位置を保持し、55% を削除すると、体の全幅を埋めます。左側のパネルを削除したときに、右側のパネルの横から本文の左側の境界線までコンテンツを設定するにはどうすればよいですか? たとえば、html コードから左パネルを削除したい場合、内容を 55% から 75% に変更するのは好きではありません。残りの 75% まで自動的に拡張されるのが気に入っています。私は同様の質問を読みましたが、成功しませんでした...

4

1 に答える 1

1

を使用して、このソリューションはどうですかoverflow:hidden：

HTML

<div id="right">
    some module
</div>
<div id="left">
    some module
</div>
<div id="content">
    some content
</div>

CSS

#left{float:left; width:20%}
#right{float:right; width:25%}
#content{overflow:hidden;}

JSFiddle

左ペインを取り除いて、何が起こるか見てみましょう: コンテンツが残りの幅を埋めます。

少し分かりやすくするために、背景色をいくつか追加しました。

于 2013-08-09T13:40:58.973 に答える