2

このフィドルを参照してください: http://jsfiddle.net/LGVKm/1/

セマンティックと SEO の理由から (そして私はそれが好きなので)、ドキュメント フローのコンテンツの後に aside 要素を配置したいと考えています。しかし、脇をテキストの左側、上部に浮かせたいと思います。css を使用してそれを可能にする方法はありますか? たくさん試しました。

テキスト div の前にいつでも aside を置くことができますが、それは重要なコンテンツの前に置きます。私はしたくない。それともプライドを捨てて楽な道を歩むべきか。それは検索エンジンにとって重要でしょうか。aside 要素の優先度は低いと思います...スパイダーがどのようにhtml5を認識しているかわかりません...

もう 1 つのセマンティックな点: コンテンツに article タグを使用することに疑問を感じましたが、よくわかりません。配布されるわけではありません。記事のセクションを置き換えることもできますが、私の考えではセクションのほうが理にかなっています。

4

5 に答える 5

1

これにはCSS3ソリューションがあり、それが役立つ場合があります。これには、柔軟なプロパティを使用できます。

.parent{
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -moz-box-direction: reverse;
    -webkit-box-direction: reverse;
    box-direction: reverse;
}
.parent div { 
    border: 1px solid blue;
    -moz-box-flex: 2;
    -webkit-box-flex: 2;
    box-flex: 2;
}
aside {
    width: 4em; 
    border: 1px solid red;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

これをチェックしてくださいhttp://jsfiddle.net/LGVKm/26/

これを読んでください https://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

于 2012-09-06T09:47:10.520 に答える
0

http://jsfiddle.net/LGVKm/10/これを試してみてください。あなたはあなたの解決策を得るでしょう

于 2012-09-06T09:29:44.343 に答える
0

要素の幅を定義し、幅が定義されたコンテナを持っている限り、要素を左右に浮動させることができます。私が言いたいことを反映するためにあなたのjsfiddleを変更しました。

于 2012-09-06T10:10:46.877 に答える
0

次のようなものを追加してみてください：

float:right; width: 70%

div要素に。

于 2012-09-06T09:17:47.230 に答える
0

レイアウト

全体的な構造 (ナビゲーションや Web ページの見出しなど) によっては、絶対配置を使用できます。ここでうまくいくと思います（relative;コンテナ、列のabsolute1つ、および他の列margin）。

float:right;メソッドも機能します。サイズ変更の動作が気に入らない場合は、 CSS Media Queriesを見て、ビューポートが変更されたときにレイアウトを調整できます。

articleまたはsection？

もう 1 つのセマンティックな点: コンテンツに article タグを使用することに疑問を感じましたが、よくわかりません。配布されるわけではありません。記事のセクションを置き換えることもできますが、私の考えではセクションのほうが理にかなっています。

articleそのコンテンツ（「私たちの仕事」の範囲内）が、それ自体で読むのが理にかなっているまとまったテキストである場合、それは正しい選択です.

配布されるかどうかは問題ではありません。重要なのは、その意味を失うことなく通常配布できるかどうかだけです。

それがページの唯一のコンテンツ (= メイン コンテンツ) である場合は、articleほとんどの場合正しい選択です。最上位に他のセクション化要素 (navまたは など) がない場合にのみ、別のものを使用するのではなく、代わりに直接使用する必要があります。asidearticlebody

その他の注意事項:

section2 つの「サブ」ブロックを明示的な要素で囲むことができます (そうすべきだと思います)。

aside明示的な見出しを付けることができます (そうすべきだと思います) 。デザインに不要な場合は、視覚的に非表示にします (スクリーン リーダーで読み取れるように)。

定義figureに一致する場合にのみ使用してください。キャプション付きの画像が必要なすべての場合に使用しないでください。

現時点では、あなたは(または、必要に応じて)asideに「関連」しています。これは意図したものですか？それ以外の場合は、子孫として追加する必要があります(そのため、Web ページ全体に「関連」します)。sectionarticlebody

于 2012-09-07T11:15:53.273 に答える