0

レスポンシブ レイアウトにメディア クエリを使用して、Wordpress テーマを構築しようとしています。セマンティックマークアップを維持しながら正しいレイアウトを取得することに関して、いくつかの問題があります。

基本的に、幅が 764 ピクセル未満のページの投稿日付については、日付、箇条書き、および投稿カテゴリをインラインで表示したいと考えています。ページがこのサイズを超える場合、投稿日はメインの投稿列 (main-column) の横に列 (entry-date) として表示されます。

私はなんとかそこにたどり着いたと思いますが、意味的に意味をなすために投稿内にヘッダーとフッターのセクションを保持しようとしたため、このhtmlコードが有効かどうか疑問に思いました.

フィードバックはありますか？

ありがとう、ジョン

<article class="post">
    <div class="entry-date">
        <span><span>30<sup>th</sup></span> Sep 2013</span>
    </div>              
    <div class="main-column">
        <span class="bullet">&#x25CF;</span>
        <header class="entry-header">
            <span class="entry-category"><a href="#">Cars</span>                    
            <h1 class="entry-title"><a href="#" title="" rel="bookmark">A new car from Ferrari</a></h1>
            <span class="entry-authors vcard">by <a href="#" title="" rel="me">John Smith</a> </span>   
            <div class="featured-img"><img src="img/ferrari.jpg" class="" alt=""></div> 
        </header><!-- .entry-header -->
        <div class="entry-content">
            <p>Ferrari have released a great new car, which is very fast.</p>
            <span class="continue-reading"><a href="#">Continue reading</a></span>
        </div><!-- .entry-content -->
        <footer class="entry-meta">
            <span class="entry-tags"><a href='#'>Sports cars</a></span>
        </footer><!-- .entry-meta -->
    </div>
</article><!-- #post-1234 -->
4

1 に答える 1

1

コメントは完全にオフです。検証はセマンティクスとは何の関係もありません。それはまったく別の主題です。セマンティックとは、コードに意味を与えることです。

現在、あなたはこれを持っています

<div class="entry-date">
    <span><span>30<sup>th</sup></span> Sep 2013</span>
</div>

これはよりセマンティックになり、不要なタグの使用を避けます (スタイリングのためだけにタグを追加しないでください。css ソリューションを探してください)。

<div class="entry-date">
    30<sup>th</sup>Sep 2013
</div>
于 2013-06-12T10:40:43.657 に答える