css - 基于 div 而不是屏幕的条件 CSS

Question

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

最终目标是，如果 id 为 primary 的元素的宽度为 915 或更小，则将具有 bricks 类的元素的宽度设置为 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%;
    }
}

如果屏幕尺寸小于 915 像素，这目前有效并将带有砖 block 作为类的元素的宽度设置为 90%。但是要注意的是，有一些动态内容可能会或可能不会 float 到 id 为 primary 的元素的左侧和右侧。这意味着屏幕尺寸并不总是决定元素的宽度。

问题:有没有办法根据 #primary 的宽度仅使用 CSS(无 javascript/php/等)为 .bricks 设置条件 CSS 而不是屏幕尺寸？

我知道这可以通过 javascript 轻松完成，但要使其与其他 javascript/jQuery 插件一起使用，必须在 CSS 样式表中而不是在元素样式属性中设置 css。

Answer 1

无法在 div 宽度上放置 if 条件。

我知道这可以用 javascript 轻松完成，但要使其与其他 javascript/jQuery 插件一起使用，必须在 CSS 样式表中设置 css，而不是在元素样式中属性。

为此，您可以在样式表中使用 2 个不同的类，即

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

现在您可以使用 jQuery 检查 #primary 容器宽度并设置类:

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