わかりました、1〜2週間前に単純なレイアウトの問題がありました。つまり、ページのセクションにはヘッダーが必要です。
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
かなりシンプルなもの。テーブルの憎しみはWebの世界で引き継がれているようですが、テーブルの代わりにHTMLフォームに定義リスト（DL、DD、DT）タグを使用する理由を尋ねたときに思い出しました。 これで、テーブルとdivs / CSSの一般的なトピックが以前に説明されました。次に例を示します。
- DIV対表 ; そして
- DIVではなくテーブル。
したがって、これはレイアウト用のCSSとテーブルについての一般的な議論を意図したものではありません。これは単に1つの問題の解決策です。私はCSSを使用して上記のさまざまな解決策を試しました：
- ボタンまたはボタンを含むdivの右にフロートします。
- ボタンの相対位置。そして
- 相対+絶対位置。
これらの解決策はどれも、さまざまな理由で満足できるものではありませんでした。たとえば、相対的な配置により、コンテンツの下にドロップダウンメニューが表示されるというZ-indexの問題が発生しました。
だから私は戻って行くことになりました：
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>
そして、それは完全に機能します。それは簡単で、後方互換性があり（おそらくIE5でも動作します）、動作します。配置やフロートをいじる必要はありません。
それで、誰もテーブルなしで同等のことをすることができますか？
要件は次のとおりです。
- 下位互換性： FF2およびIE6に対応。
- 合理的に一貫している：異なるブラウザー間;
- 垂直方向中央：ボタンとタイトルの高さが異なります。そして
- 柔軟性：配置（パディングやマージン）とスタイル設定を合理的に正確に制御できます。
余談ですが、今日、興味深い記事をいくつか見つけました。
編集：フロートの問題について詳しく説明しましょう。この種の作品：
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
おかげAntのPのためのoverflow: hidden部品（まだ、なぜけれども得ることはありません）。ここで問題が発生します。タイトルとボタンを垂直方向に中央揃えにしたいとします。要素の高さが異なるため、これには問題があります。これと比較してください：
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
完璧に動作します。
11
「vimにはどの色を使用すればよいですか？」私の特定のCSSレイアウトの問題は反対票を投じられます。
—
cletus 2009
どんな場合でも、テーブルなしで何でも好きなことができます。また、なぜ@SamBがこの2年前の質問にぶつかったのですか？DOH +
—
動的
@ yes123：まあ、構文の強調表示が間違っていた...
—
SamB