1

ページの要素に基づいて列を自動的にスタイル設定する css を作成しようとしています。列にはいくつかの組み合わせがあります。

aside- article-aside

aside-article

article-aside

article

画面のどちら側にあるかに応じて、それぞれasideに左または右のクラスがあります。sはasideレイアウトに関係なく常に一定の幅ですが、articleの幅はレイアウトによって変わります。

CSS を使用して (できれば JavaScript を使用せずに) の幅を設定したいと考えていますarticle。私は CSS 兄弟で遊んでいますが、これを機能させることはできません。これは、理論的にはコードが機能するようにする方法です。

article{
   /* just article */
   width: some width;
   }
.left~article{
   /* aside-article */
   width: some width;
   }
.right~article{
   /* article-aside */
   width: some width; /* (this can be the same as the previous;
                         I don't know if it's easier to define
                         them together or separately) */
   }
.left~.right~article{
   /* aside-article-aside */
   width: some-width;
   }

最初の 2 つのレイアウトは機能しますが、次の 2 つのレイアウトは機能しません。article問題は、DOM のそのセクションの最後でなくても、常にスタイルを設定したいということです。最後の 2 つのレイアウトに対してセレクターarticle~.rightと.left~.article~.rightをそれぞれ使用すると、レイアウトの正しい組み合わせ (つまり、articlethenasideまたは an articlebetween 2asideのいずれか) が見つかりますが、それは一番右のものをターゲットにしておりaside、 のスタイルを変更することはできませんarticle。

CSSの兄弟セレクターを使用してDOMのターゲット要素の前にあるかどうかにかかわらず、すべての兄弟を考慮に入れる方法はありますか? または、JavaScriptを使用せずにこれを回避できる「創造的な」方法を誰かが考えられますか?

ありがとう！

4

1 に答える 1

3

CSS3 ソリューション

これらの包含要素にasideまたはの直接の子のみがあると仮定するとarticle、CSS3 ソリューション (つまり IE9+) があります。ここでの例でwidthは、要素の全体的な400px幅と標準幅を想定してasideいます (ただし、異なる可能性があります)。

aside {
    width: 100px;
}

aside.left + article,
article:first-child {
    width: 300px;
}

article:only-child {
    width: 400px; /* overrides article:first-child if it is only-child */
}

aside.left:nth-last-of-type(2) + article {
    width: 200px; /* only engages if there are two asides */
}
于 2012-11-21T21:08:01.783 に答える