1

@mediaHTMLとCSSのみを使用して、従来のレスポンシブデザインのようにブラウザのサイズではなく、他の要素に応答する要素をページ内に構築する方法があるかどうかを調べようとしています。

たとえば、幅が900pxの要素があります。1つ、2つ、または3つの子要素を含めることができます。兄弟要素の数に応じて、子要素のスタイルを設定して追加の要素を表示したいと思います。

例えば

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

vs

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

子要素の表示は異なります。幅、パディング、境界線などが異なります。また、最初のサンプルでは非表示になっているが、2番目のサンプルでは表示される子要素もあります。

私はこれがJS、PHPでできることを知っています...しかし私はそれなしでそれをする方法があるかどうか見ようとしています。他の子要素の存在に応じて特定の要素を非表示/表示したいので、相対サイズ（％など）を使用してもカットされません。

ありがとう

4

1 に答える 1

3

CSS3でそれは可能です、それを理解するのに数分かかりました。

http://jsfiddle.net/Vdz7s/をチェックしてください。

HTML：

<h1>One:</h1>
<div class="parent">
    <div class="child">1</div>
</div>

<h1>Two:</h1>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
</div>

<h1>Three:</h1>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>​

CSS：

.parent .child:nth-last-child(1)
{
    border:1px solid yellow;
}

.parent .child:nth-last-child(2),
.parent .child:nth-last-child(2) ~ .child
{
    border:1px solid orange;
}

.parent .child:nth-last-child(3),
.parent .child:nth-last-child(3) ~ .child
{
    border:1px solid red;
}
​

コードはかなり自明だと思います。それなら、子供たちをターゲットにして、子供たちとやりたいことを何でもする必要があります。

于 2012-11-01T01:07:09.877 に答える