固定幅の Div の後に残りのスペースを Div に占有させるにはどうすればよいですか?

固定幅の 1 つと残りのスペースを占有するもう 1 つの div を調整する方法

2 つの div コンテナーを操作する場合、1 つは特定の幅が必要で、もう一方が残りのスペースを動的に占有する必要がある場合、このレイアウトを実現するにはいくつかのアプローチがあります。 2 つの方法を見てみましょう:

表示の使用: テーブルまたはテーブルセル

この方法では、CSS 表示プロパティを使用してテーブルのような構造を作成します。

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.right {
    float: right;
    width: 250px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.left {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}</code>

この場合、「右」 div の幅は 250px に固定されていますが、「overflow: hidden」プロパティにより「左」 div が残りのスペースを占めます。

Float と Percentage width の使用

もう 1 つの方法では、CSS float プロパティを使用し、div の幅をパーセンテージで設定します。

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.left {
    float: left;
    width: 83%;
    min-height: 50px;
    margin-right: 10px;
}

.right {
    float: right;
    width: 16%;
    min-height: 50px;
    height: 100%;
}</code>

ここで、「左」 div は使用可能な幅の 83% を占め、固定幅の「右」 div には 16% が残ります。

サンプルデモ

チェックこれらのメソッドの動作を確認するには、JSFiddle で次のライブ デモを実行します: http://jsfiddle.net/SpSjL/

以上が固定幅の Div の後に残りのスペースを Div に占有させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。