0

ページの左側に固定幅のナビゲーションがあり、右側にメイン div があり、画面の残りの幅を占有するという問題を解決しようとしています。

右側のメイン div はテーブルを含むことを意図しており、メイン エリアの幅全体の幅に合わせてテーブルを拡張したいと考えています。

CSSでこれを行う方法はありますか？

次のようなコードがあります。

<div id="overallDiv">

<div id="lhn">
Left-hand nav
</div>
<div id="mainBody">
    <table>
        <tr><td>A1</td><td>A2</td><td>A3</td></tr>
        <tr><td>B1</td><td>B2</td><td>B3</td></tr>
        <tr><td>C1</td><td>C2</td><td>C3</td></tr>
        <tr><td>D1</td><td>D2</td><td>D3</td></tr>
    </table>
</div>

</div>

私のCSSはこれに似ています：

#lhn
{
    display:inline;
    float:left;
    width: 100px;
}
#mainBody
{
    display:inline;
    float:left;
}

ページの残りの部分をテーブルで埋めるにはどうすればよいですか?

4

4 に答える 4

1

私は以下を使用します：

#overallDiv {width: 100%;}
#lhn {width: 100px; float: left;}
#mainBody{float: left;}
#mainBody table {width: 100%;}

これにより、ラッパーが使用可能な画面の 100% に設定され、左側のナビゲーションが 100px になり、残りの #mainBody が 100% になります。

于 2012-09-29T06:00:44.213 に答える
1

現時点でこれを行う最も簡単で「ハック」の少ない方法は、展開display: tableして次のようにすることdisplay: table-cellです。

​#overallDiv {
    display: table;
    width: 100%;
}
#lhn,
#mainBody {
    display: table-cell;
}
#lhn {
    width: 200px;
    background: #ddd;
}
​#mainBody > table {
    width: 100%;
}​

http://jsfiddle.net/wxnBQ/

テキスト以外のレイアウトに使用floatすることは、その効果の長期にわたる「借用」です。「当時の有用なアイデア」の墓に入るのが早ければ早いほど、私たち全員がより良くなる.

もちろん、これに対する「最良の」アプローチは、Flexboxの実装を行うことです ( W3C が提案した仕様)。その日はまだ来ていません。

于 2012-09-29T06:27:54.563 に答える
0 
#overallDiv {width: auto; float: left;}
#lhn {width: 100px; float: left;}
#mainBody{float: left; width: auto;}
#mainBody table {width: 100%;}
于 2012-09-29T06:07:10.227 に答える
0

#overall に display: table を設定し、内部 div に display: table-cell を設定します

于 2012-09-29T06:02:24.687 に答える