-1

HTML 5 についてさらに学習するために、個人用サイトを再構築しています。その過程で、ヘッダー/記事/セクション/脇などの新しい HTML 5 要素のいくつかを使用するようにブログ投稿を移動しています。例を挙げると、ブログ投稿は次の形式になります。

私のブログ記事のタイトル

【ブログ公開日はこちら】

コンテンツの概要を示す単一の段落。

【はじめての字幕】

最初のサブタイトルに関連付けられたコンテンツ

【私の第二副題】

2 番目のサブタイトルに関連付けられたコンテンツ

【コメントはこちら】

これに加えて、いくつかのコンテンツ、おそらく引用またはグラフィックを投稿の右側に表示します。私には 2 つの課題があります。1) HTML 5 要素を相互に関連付けて使用する方法がわかりません。特に、記事とセクションが混乱しています。2) aside 要素を残りのコンテンツの右側に配置する方法。現在、私は以下を持っています:

<header>
  <h1>My Blog Post Title</h1>
  <p>Published <time datetime='18-06-2013'>June 6, 2013</time></p>
</header>

<div>
  <article>
    <p>A single paragraph that provides an overview of the content.</p>
    <section>
      <header>My first subtitle</header>
      The content associated witht he first subtitle.
    </section>

    <section>
      <header>My second subtitle</header>
      The content associated with the second subtitle.
    </section>
  </article>

  <aside>
    My right side content. This area should take up 33% of the entire width.
  </aside>
</div>

私は正しい道を進んでいますか?記事とセクションに関するあらゆる種類の情報が表示されますか? いずれにせよ、現在、私のasideコンテンツは記事のコンテンツの下に表示されます。本当は横に置きたい。この種のレイアウトを提供する CSS の適切な方法を知っている人はいますか?

ありがとうございました

4

3 に答える 3

0

1) Html5 が導入さ<Section>れ、<article>純粋にセマンティクスのためのタグが付けられました。これは、コードに意味のある説明を与えるために何を使用するかを意味します。ブラウザで見ると、両方とも同じように表示されます。

For e.g. Articles make more sense when you show forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

FAQ、製品情報などの情報をユーザーに表示する場合は、Section を使用します。

また、データを意味論的に定義できない場合は、単純に<div>

これは違いを説明する良い例です

http://html5doctor.com/the-article-element/

<header>を使用してネストしていることにも気付きました<h1>。これは必要ありません。どちらも同じ意味であるため、<header>orを使用します。<h1>これは、Web アクセシビリティ標準に従ってページを作成すると、より理にかなっています。

于 2013-06-18T13:46:35.540 に答える
-1

これに対する「完璧な」答えはまだないと思います。しかし、私はそれを試してみます。

<article class="post">
    <div class="left-side">
        <header>
            <h1>My Blog Post Title</h1>
            <p>Published <time datetime='18-06-2013'>June 6, 2013</time></p>
        </header>

        <section>
            A single paragraph that provides an overview of the content.
        </section>

        <section>
            <header>
                <h1>My first subtitle</h1>
            </header>
            <p>The content associated witht he first subtitle.</p>
        </section>

        <section>
            <header>
                <h1>My second subtitle</h1>
            </header>
            <p>The content associated with the second subtitle.</p>
        </section>
    </div>

    <div class="right-side">
        <aside>
            My right side content. This area should take up 33% of the entire width.
        </aside>
    </div>
</article>

ブログ投稿全体を記事にまとめ、その部分をセクションに分割します。

浮いている部分aside

.right-side, .left-side {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.right-side {
    width: 33%;        
    float: right;
}

.left-side {
    width: 67%;
    float: left;
}

そして、次の明確な修正floats

.post:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
于 2013-06-18T13:02:03.560 に答える