web-dev-qa-db-ja.com

テーブルを使用せずにこのHTMLレイアウトを実行できますか？

わかりました、1、2週間前に簡単なレイアウトの問題がありました。つまり、ページのセクションにはヘッダーが必要です。

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

かなりシンプルなもの。 Webの世界ではテーブル憎しみが引き継がれているように見えますが、 でHTMLフォームの定義リスト（DL、DD、DT）タグをテーブルではなく使用するのはなぜですか？ これで、テーブルとdiv/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>

Ant P for 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>

完璧に機能します。

htmlcsslayout
99
cletus

仕事を迅速かつ正確に行うために利用可能なツールを使用しても何も問題はありません。

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

私は個人的にこのためにテーブルを使用していました。

ネストしたテーブルは避けるべきだと思います。

49
Gregor Brandt

左右にフロートし、両方をクリアするように設定するだけで完了です。テーブルは必要ありません。

編集：私はこれに対して多くの賛成を得たことを知っており、私は正しいと信じていました。ただし、単にテーブルが必要な場合があります。 CSSを使ってすべてを試すことができ、最新のブラウザで動作しますが、古いブラウザをサポートしたい場合は...繰り返したくないので、ここで 関連スタックオーバーフロースレッド および rant私のブログで 。

Edit2：古いブラウザはもう面白くないので、私はTwitter bootstrap新しいプロジェクトに使用しています。素晴らしいです。ほとんどのレイアウトのニーズに対応し、CSSを使用します。

27
Milan Babuškov

これは一種のトリックの質問です。

タイトルとボタンを垂直方向の中央に配置するとします。

記録のために、CSSでは垂直方向のセンタリングは難しいと述べたいと思います。 「CSSでXを実行できますか？」この場合、はい、その特定のことは難しいです。

誰かが質問全体を編集して、「CSSで垂直方向のセンタリングに問題があるか？」.

17
AmbroseChapel

タイトルを左にフロートし、ボタンを右にフロートし、（ここまでは最近まで知らなかった部分です）-それらのコンテナを両方とも{overflow:hidden}。

とにかく、z-indexの問題を回避する必要があります。うまくいかず、あなたが本当に IE5のサポートが必要な場合は、先に進んでテーブルを使用してください。

16
user42092

表形式のデータではないため、このインスタンスでは表を使用しないことをお勧めします。ボタンを右端に配置するのは純粋にプレゼンテーションです。これは、テーブル構造を複製するために私がすることです（サイトの階層のどこにいるかに合わせて別のH＃に変更します）。

<style>
  .group-header { background: yellow; zoom: 1; padding: 8px; }
  .group-header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  /* set width appropriately to allow room for button */
  .group-header h3 { float: left; width: 300px; }
  /* set line-height or margins to align with h3 baseline or middle */
  .group-header input { float: right; }
</style>

<div class="group-header">
  <h3>This is my title</h3>
  <input type="button" value="Collapse"/>
</div>

真ん中に真の垂直方向の配置が必要な場合（つまり、テキストを折り返してボタンをテキストの両方の行に対してまだ中央に配置する場合）、テーブルを作成するか、position: absoluteで何かを処理する必要があります。マージン。 position: relativeをドロップダウンメニュー（またはその親である可能性が高い）に追加して、ボタンと同じ順序レベルにプルすることができます。それに。

Divのwidth: 100%はブロックレベルの要素であるため、zoom: 1は不要です。IE（他のブラウザが実際のclearfixを取得します。また、より具体的にターゲットを設定する場合は、これらの無関係なクラスをすべて必要としませんが、ボタンを配置するためにラッパーdivまたはspanが必要になる場合があります。

3
One Crayon

Divでdouble floatを実行し、clearfixを使用します。 http://www.webtoolkit.info/css-clearfix.html パディング/マージンの制限はありますか？

<div class="clearfix">
   <div style="float:left">Title</div>
   <input type="button" value="Button" style="float:right" />
</div>
2
bendewey
<div class="group-header">
    <input type="button" name="Button" value="Button" style="float:right" />
    <span>Title</span>
</div>
2
Omer Bokhari

Flexboxを使用することを選択しました。

基本的に、整列する子の親に移動して、display:box（もちろん接頭辞）を追加する必要があります。それらを側面に配置するには、 justify-content を使用します。この場合のように、最後に揃える必要がある要素がある場合、その間のスペースは正しいことです（リンクを参照）...

次に、垂直方向の配置の問題。 2つの要素の親を作成したので、Flexboxを配置する必要があります。 align-items: centerを使用するのは簡単です。

次に、前に必要なスタイルを追加し、ヘッダーのタイトルとボタンからフロートを削除し、パディングを追加しました。

.group-header, .group-content {
    width: 500px;
    margin: 0 auto;
}
.group-header{
    border: 1px solid red;
    background: yellow;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    padding: 8px 0;
}
.group-content{
    border: 1px solid black;
    background: #DDD;
}
.group-title {
    padding-left: 8px;
}
.group-buttons {
    padding-right: 8px
}

デモを参照

1
user3522940

読み込みが完了するまでテーブルが表示されないという単純な理由から、テーブルデータのみにテーブルを使用する必要があることに同意します（どれだけ速くても、CSSメソッドよりも遅くなります）。ただし、これは最もシンプルでエレガントなソリューションだと思います。

<html>
    <head>
        <title>stack header</title>
        <style type="text/css">
            #stackheader {
                background-color: #666;
                color: #FFF;
                width: 410px;
                height: 50px;
            }
            #title {
                color: #FFF;
                float: left;
                padding: 15px 0 0 15px;
            }
            #button {
                color: #FFF;
                float: right;
                padding: 15px 15px 0 0;
            }
        </style>
    </head>

    <body>
        <div id="stackheader">
        <div id="title">Title</div>
        <div id="button">Button</div>
        </div>
    </body>
</html>

ボタンの機能とその他の詳細は、この基本フォームからスタイル設定できます。悪いタグをおologiesびします。

1
Galen777