9

<div>からタグに移行するという目標は、<table>よりセマンティックであるため、理にかなっていることを理解しています。ただし、列ベースのレイアウトを機能させるためにブロックをクリアする必要がある場合に得られる利点はわかりません。例えば：

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

余分な<br>タグは、厳密にスタイルを記述するために使用され、レイアウトを機能させるために必要です。これにより、テーブルを削除することで得られるすべてのメリットが台無しになりませんか?

4

6 に答える 6

31

クリアリングブロックは必要ないと言ったらどうしますか？ 

.clear-block:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-block {
    display: inline-block;
}
<div id="wrapper" class="clear-block">
    <div style="float:right">
        Your content here
    </div>
    <div style="float:left">
        More content here
    </div>
</div>

JSFiddle

于 2009-01-02T17:06:14.817 に答える
11

表形式のデータを表示している場合でも、多くのフローティング div よりもテーブルを使用する方が理にかなっています。持っているツールを賢く使用してください。テーブルが最適なオプションである場合に、やみくもに CSS を使用しないでください。

于 2009-01-02T17:15:13.927 に答える
8

<div>からタグに移行するという目標は、<table>よりセマンティックであるため、理にかなっていることを理解しています。

実際には、それは正反対<table>です。実際、(and ) 要素の要点は、セマンティクスを持たないことです!<div><div><span>

<div>「セマンティック HTML」と表現された s の森を見ると、いつもイライラします。いいえ、ちがいます！それはセマンティックでない HTML です。特に がたくさん含まれている場合<div class='float-left'>、<div id='bottom'>私の個人的なお気に入り<div class='paragraph'>と<span class='emphasis'>.

un-semanticを使用することは、間違った-semantic<div>を使用するよりも確かに優れていますが、意味的に正しい要素を使用する方がさらに良いでしょう– 多くの場合、問題は HTML が何も提供しないことです. たとえば、スニペットでは要素を使用しますが、仕様によると、この要素は住所をマークアップするためのものではありません! ページの作成者の住所をマークアップするためだけのものです 。IOW はまったく役に立ちません。<table><address>

投稿した例には多くのコンテキストが欠けているため、言うのは難しいですが、実際には、表形式または階層データのいずれかを表示する必要があるように見えます。その場合、<table>s または<ul>s がより適切な選択である可能性があります。

あなたの質問とはまったく関係ありません。hCardとXOXOのマイクロフォーマットを調べてみてください。

于 2009-01-02T23:03:22.553 に答える
1

全くない。テーブルの使用を避けることには、他にも多くの利点があります。

于 2009-01-02T17:08:12.207 に答える
1

個人的には、クリアのニーズに clearfix ハックを使用しています。

/* Clearfix */
#content:after,
.box:after {
  content:'.';
  display: block;
  clear: both; 
  visibility: hidden; 
  height: 0;
}
#content,
.box {
  zoom: 1; /* IE */
}

clearfixクラスをすべてに追加するのではなく、セレクターをカンマで区切っていることに注意してください。それは本当にうまくいきます。唯一の問題は、zoomプロパティが IE 固有であり、検証されないことですが、overflow: auto.

私はこれをプロのウェブサイトで5年間問題なく使用しています.

于 2009-01-03T00:28:50.523 に答える
0

アンナカタの答えが示すように、それらのクリア ブロックは必要ありません。ただし、これとは別に、テーブルを使用しない利点の 1 つは、ページを段階的にレンダリングできることです。テーブルは、すべてのコンテンツを含むテーブル全体が解析された場合にのみレンダリングできます。ページが大きく、接続が遅い場合は、時間がかかる場合があります。div はすぐにレンダリングできます。つまり、テーブルよりもはるかに早く、ユーザーが使用できるものを提示できる可能性があります。

もちろん、これはちょっとしたおまけの利点にすぎません。そうではなく、表を避ける理由にはなりません(非表形式のデータの場合)。

于 2009-01-02T17:21:13.680 に答える