BinaryDevelop
  1. ホーム
  2. html

[解決済み] テーブルを使わないで、このHTMLレイアウトは可能ですか？

2022-12-18 06:27:29

質問

1、2週間前に簡単なレイアウトの問題が発生しました。 すなわち、ページのセクションはヘッダーを必要としていました。 

+---------------------------------------------------------+
| Title                                            Button |
+---------------------------------------------------------+

かなり単純なものです。 Webの世界ではテーブルが嫌われているようです。 なぜ HTML フォームではテーブルの代わりに定義リスト (DL,DD,DT) タグを使うのですか? さて、テーブルと divs/CSS の一般的な話題は、たとえば以前にも取り上げました。

ですから、これはレイアウトのための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に対応させました。
  • 合理的に一貫しています。 異なるブラウザー間で
  • 垂直方向に中央揃え。 ボタンとタイトルが異なる高さであること。
  • フレキシブルです。 位置決め（パディングやマージン）やスタイリングを適度に正確に制御できます。

余談ですが、今日、興味深い記事をいくつか見つけました。

EDITです。 フロートの問題について詳しく説明します。 これは一種の作品です。 

<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>

おかげさまで アリ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>

で、これは完全に動作します。

どのように解決するのですか？

仕事を素早く正確に行うために、利用可能なツールを使用することは悪いことではありません。

この場合、テーブルが完璧に機能しました。

私は個人的に、これにはテーブルを使用しました。

ネストされたテーブルは避けるべきだと思います、物事が面倒になる可能性があります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します