2

テーブルを使用せずに次の効果を達成する方法を見つけようとして少し時間を費やしましたが、理解できませんでした: http://jsfiddle.net/sKFzA/

CSS :

.header{width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{width:99%;}
.dateCol{vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}

HTML :

<table class="header">
<tr>
    <td class="titleCol">This is the blog title</td>
    <td class="dateCol"> <span>&nbsp;</span><span class="dateText">1/23/2012</span>

    </td>
</tr>
</table>

それを説明するために、ブログのタイトルとブログの日付があります。タイトルは長く、折り返すことができます。最終行の最後で、折り返すかどうかに関係なく、ブログの日付を右揃えにします。

そこで、質問が 2 つあります。これにテーブルを使用しない理由はありますか? もしそうなら、静的なフォントサイズを想定せずにどのようにそれを達成しますか?

4

4 に答える 4

2

シマノンと他の人々の助けを借りて、私はそれを集めました：

  1. ここでテーブルを使用しない唯一の理由は、レイアウトは技術的にはテーブルの本来の目的ではなく、テーブルを使用しないことでレイアウト (CSS) をマークアップ (HTML) から切り離すことができるためです。ただし、テーブルを使用した場合、悪影響があるとは認識していません。

  2. テーブルの概念がなければ、この正確なレイアウトに対する適切な解決策はないようですが、スタイルを適用して他の要素をテーブルとして表示することにより、HTML テーブルを使用せずにテーブル ソリューションを実現できます。そこで、テーブル要素を div に置き換えました。日付の前にスペースがあるスパンにより、行の高さやフォント サイズをハードコーディングしなくても、小さいサイズの日付をタイトルのベースラインに揃えることができます。そのため、フォント サイズが変更された場合でも、ハードコードされた他のマジック ナンバーの更新について心配する必要はありません。

http://jsfiddle.net/K35gT/

HTML

<div class="header">
    <div class="titleCol">This is the blog title</div>
    <div class="dateCol">
        <span>&nbsp;</span><span class="dateText">1/23/2012</span>
    </div>
</div>

スタイル:

.header{display:table;width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{display:table-cell;width:99%;}
.dateCol{display:table-cell;vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
于 2013-06-18T19:17:48.740 に答える
2

CSS には、任意の要素が表の特定のコンポーネントのように動作できるようにするプロパティがあります。

http://cssdeck.com/labs/rjiesryc

<header>
  <h1>This is the blog title</h1>
  <time datetime="2012-01-23">1/23/2012</time>
</header>

CSS

 header {
      display: table;
      width: 100%;
    }

    header h1, header time {
      display: table-cell;
    }

    header time {
      /*vertical-align: bottom;*/
    }
于 2013-06-18T17:58:10.230 に答える
0

テーブルはまったく必要ありません。適切なスタイルで要素をブロックするだけです。

それが私のウェブサイトなら、私はこれをします：

<header>
  <h1>This is the blog title</h1>
  <time datetime="2012-01-23">1/23/2012</time>
</header>

この CSS と組み合わせると、次のようになります。

header {position:relative; width:100%; font:25px Arial,Helvetica,sans-serif;}
header > h1 {margin:0px;}
header > time {display:block; font-size:12px; text-align:right;}

HTML5 要素を使用するか、一般的な要素を使用するか、およびクラス名をフックするかどうかを決定できます。上記の jsFiddle は次のとおりです: http://jsfiddle.net/sKFzA/13/

于 2013-06-18T17:34:26.863 に答える
0

このようなもの？私はあなたが正しいことを願っています。

HTML :

<div id="titleRow">This is the blog title</div>
<div id="dateText"><span id="spandate">1/23/2012</span></div>

CSS :

   #titleRow{width:80%; height: 25px; font:25px Arial,Helvetica,sans-serif; 
   float:left;text-align: left;}
   #dateText{width:20%; height: 25px; font-size:12px;float:left; text-align: right; position: relative;}
   #spandate { position: absolute; bottom: 0; right: 0;}

ここを参照してください：http://jsfiddle.net/sKFzA/31/

于 2013-06-18T17:34:56.347 に答える