6

だから私はいくつかの調査を行い、答えに近づいていますが、私がやろうとしていることはCSSだけでは不可能かもしれません.

最終的な目標は、プライマリ ID を持つ要素の幅が 915 以下の場合、ブリックのクラスを持つ要素の幅を 90% に設定することです。

HTML スニペット:

<div id='primary'>
    <div class='bricks'>
        <p>div-1</p>
    </div>
    <div class='bricks'>
        <p>div-2</p>
    </div>
</div>

CSS スニペット:

#primary{
    width:100%;
}

.bricks{
    width:45%;
}

@media only screen and ( max-width: 915px ){
    .bricks{
        width:90%;
    }
}

これは現在機能しており、画面サイズが 915px 未満の場合、ブリックをクラスとして持つ要素の幅を 90% に設定します。ただし、キャッチは、プライマリの id を持つ要素の左右にフローティングされる場合とフロートされない場合がある動的コンテンツがあることです。これは、画面サイズが常に要素の幅を決定するとは限らないことを意味します。

質問:画面のサイズではなく、.bricks幅に基づいて CSS のみ (javascript/php などを使用しない)を使用するための条件付き CSS を設定する方法はありますか?#primary

これは javascript で簡単に実行できることはわかっていますが、他の javascript/jQuery プラグインで動作させるには、要素の style 属性ではなく、CSS スタイルシートで css を設定する必要があります。

4

1 に答える 1

5

div width に if 条件を置く方法はありません。

I know that this could easily be done with javascript, but for it to work with other javascript/jQuery plugins, the css has to be set in the CSS stylesheet not in the element style attribute.

このために、スタイルシートで 2 つの異なるクラスを使用できます。

.wide {width:90%;}
.half {width:45%;}

jQuery で#primaryコンテナーの幅を確認し、クラスを設定できるようになりました。

const $primary = $("#primary");
$primary
    .find(".bricks")
        .addClass($primary.width() < 915 ? "wide" : "half")
于 2013-06-19T05:37:56.707 に答える