2

こんにちは、私の名前はセーバーです。問題があります。sを使わずにはいられません<table>。私は中毒です、そしてそれは私にとって問題です。いくらかのサポートと、賢い Web デザイナーが私のやり方の間違いを教えてくれる必要があります。

2列のレイアウト

そこで、単純な 2 列のレイアウトを作成しようとしています。左側にナビゲーション、右側にコンテンツです。簡単なテーブルと私は行く準備ができています.

<table>
  <tr>
    <td valign="top"><!-- Navigation --></td>
    <td valign="top"><!-- Content --></td>
  </tr>
</table>

結果にはかなり満足しています。コンテンツはページの流れの中にあります。セルの幅を指定したり、スペースを埋めるようにセルを拡大したり、コンテンツに合わせて縮小したりできます。しかし、入れ子になったテーブルを導入し始めると (もちろん、正当な表形式のデータのために)... マークアップは見苦しく、読みにくく、維持しにくくなります。その上、私の Web デザイナーの仲間は皆、名前の呼び掛けに頼っています。

それで、私のオプションは何ですか？むしろ好きposition:absolute;です。ほんの少しのcssで...

.left { position:absolute; top:0; bottom:0; left:0; width:200px; }
.right { position:absolute; top:0; bottom:0; left:200px; right:0; }

...そして最小限の HTML マークアップ...

<div class="left"><!-- Navigation --></div>
<div class="right"><!-- Content --></div>

スリック！マークアップは明確で、デザインは流動的です。しかし今、滑らかな 2 つの列の下に何かを追加しようとすると、完全な混乱 (jsFiddle) に遭遇します。私はページの流れの中で働いていませんが、私のコンテンツがどのくらいの高さになるのかわかりません! なので高さの指定はできません。すぐにあきらめてしまう…だから、別のことを試してみましょう。

正直に言うと、float怖いです。マークアップは読むのが明らかではなく、フローティング要素は独自の心を持っているようで、私のデザインを破滅的なケースで台無しにする不吉な動機があります. この jsfiddle を検討してください。私はまだページの流れで作業していません。そして、流動的なコンテンツで静的な幅のナビゲーションが必要でしたか? どうする？

私はみんなを知りません。テーブルははるかに良い選択のようです。誰かが私にいくつかの意味を話します。また使うかも…

4

1 に答える 1

0

あなたが何をしたいのかを正しく理解しているなら、私はあなたが探していると思いますoverflow="auto". オーバーフロー プロパティは、コンテンツが要素のボックスをオーバーフローした場合にどうなるかを指定するために使用されます。

.more {
background: rgba(0,255,0,.5);
padding:10px;
overflow: auto;
}

これが実際の例です: http://jsfiddle.net/MJaSD/

于 2012-09-13T04:34:13.437 に答える