2

今日、私は作品を手に入れ、少し変わった形式の段落 <p></p>を目にします。

#product p { 
    float: left;
    width: 513px;
}

HTML は次のとおり
です
。

<div id='product'>
    <h1>Product name</h1>
    <div class='img-product'>
        <img src='http://fakeimg.pl/270x270/' />
    </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>           
</div>

この html/css の結果は、ページの左側に幅 270px の画像があり、右側に空白スペースがあります。



私の質問は

理論のみであり、実践ではありません (私はこの問題を解決する方法を知っています。タグ「p」の使用がテキストのみを対象としているかどうか、つまり、ブロックとして使用すべきではないかどうか疑問に思っています)。

正しいことは、「説明」などのdivを作成し、それらを（位置とサイズとして）フォーマットし、段落フォーマットなどを適用しないことですか？99% の確率で段落を狙うのは、単なるテキストです。

段落を div のようにフォーマットする人を見たことがないか、非常に特殊な場合です。私にとって、段落はテキスト要素であり、それ以上のものではないため、スタイルはフォント、色、行の高さなどのためのものです.

私の英語でごめんなさい

4

3 に答える 3

3

W3C 勧告のHTML 4.01 仕様には次のように書かれています。

9.3.1 段落: P 要素

P 要素は段落を表します。

7.5.4 要素のグループ化: DIV 要素と SPAN 要素

DIV および SPAN 要素は、id および class 属性と組み合わせて、ドキュメントに構造を追加するための一般的なメカニズムを提供します。これらの要素は、コンテンツをインライン (SPAN) またはブロックレベル (DIV) として定義しますが、コンテンツに他の表現方法を課すことはありません。したがって、作成者はこれらの要素をスタイル シートや lang 属性などと組み合わせて使用​​し、HTML を自分のニーズや好みに合わせることができます。

たとえば、クライアント情報のデータベースに基づいて HTML ドキュメントを生成したいとします。HTML には、「クライアント」、「電話番号」、「電子メール アドレス」などのオブジェクトを識別する要素が含まれていないため、DIV と SPAN を使用して、目的の構造効果と表示効果を実現します。

実際の段落Pがある場合は を使用しますが、段落ではないものを構造化する場合はDIVまたはを使用しますSPAN。使用する要素の選択はセマンティックであり、コンテンツに基づく必要があります。スタイリングの選択は、本当に直交しています。段落や分割のスタイルは自由に設定できます。どちらもブロック レベルの要素です。

ドキュメントの書式設定ではなく、テキストに固有の段落スタイルを維持しようとすることについて興味深い点を指摘していますが、これは、段落が内部にあるより高いレベルの区分が既にある場合にのみ可能です。そうしないと、それは選択肢になりません。私は個人的に、より複雑な構造よりも単純な構造のファンなので、段落が十分であり、より高いレベルの区分にある必要がない場合は、区分にラップするのではなく、段落にスタイリングを配置します.

于 2013-09-13T13:05:30.863 に答える
0

画像を含む div を左にフロートする必要があります。DIV はブロック レベルの要素であり、フロートしない限り他の要素を横に置くことはできません。

.img-product{
    float:left;
}
于 2013-09-13T12:24:32.130 に答える
0

試す

#product p { 
    float: left;
    width: 513px;
    padding:0px;
    margin:0px;
}
于 2013-09-13T12:26:31.890 に答える