基于div而非屏幕的条件性CSS

Question

因此，我做了一些研究，并接近答案，但我试图做的事情可能无法单独使用CSS，我真的希望它是。

我的最终目标是，如果id为primary的元素宽度为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为primary的元素的左边和右边。这意味着屏幕大小并不总是决定元素的宽度。

问题：有什么办法可以设置条件？是否有办法为以下元素设置条件CSS .bricks 只使用CSS（不使用javascriptphpetc.），基于宽度的 #primary 而不是屏幕的大小？

我知道这很容易用javascript来实现，但是为了和其他javascriptjQuery插件一起工作，css必须在CSS样式表中设置，而不是在元素样式属性中。

Answer 1

没有办法在div宽度上设置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个不同的类，即：jQuery。

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

现在你可以用jQuery检查 #primary 容器宽度，并设置类。

const $primary = $("#primary");
$primary
    .find(".bricks")
        .addClass($primary.width() < 915 ? "wide" : "half")