0

問題が発生しています。次のマークアップには、添付の図 (右のフロート) に示すように表示したいユーザー向けの追加情報を含む aside-element があります。

<section>
    <h2>site title</h2>
    <p>that's the site's main content</p>
    <aside>
        <h3>other stuff</h3>
        <div>cloud tag</div>
    </aside>
</section>

ただし、aside-element を h2-element の前に配置して、右にフロートさせたくはありません。これが機能することはわかっていますが、どういうわけか私には間違っているように思えます。検索エンジンは、それが aside-element に含まれているため、重要度の低いコンテンツであることを認識していると言えます。

しかし、ページの幅が狭くなったとき (デバイスが小さいなど)、aside 要素がメイン コンテンツの下に留まるように、aside-element の動作も希望します。

したがって、私の質問は次のとおりです。マークアップ順序を操作せずに、図に示すように aside-element をフロートする可能性はありますか (補助 div を追加しても問題ないと思います)。

ありがとうございます、楽しみにしています。

ここに画像の説明を入力

4

1 に答える 1

2

float: leftメイン コンテンツを div でラップし、メイン div と aside 要素の両方に追加する必要があります。次に、marginプロパティを使用してそれらを適切に配置します。

HTML

<section>
    <div class="main">
        <h2>site title</h2>
        <p>that's the site's main content</p>
    </div>
    <aside>
        <h3>other stuff</h3>
        <div>cloud tag</div>
    </aside>
</section>

CSS

.main {
    float: left;
}
aside {
    float: left;
}

デモを参照してください。

于 2013-02-25T22:28:19.687 に答える