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的元素的左侧和右侧。这意味着屏幕尺寸并不总是决定元素的宽度。

问题：有没有办法根据.bricks的宽度而不是屏幕的大小，仅使用CSS（没有javascript / php /等）为#primary设置条件CSS？

我知道这可以通过javascript轻松完成，但是为了与其他javascript / jQuery插件一起使用，必须在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个不同的类，即

.width90 {width:90%;} .width45 { width:45%;}

现在你可以通过jQuery检查主宽度div（#primary）

var primaryDiv = $("#primary"); var primaryWidth = primaryDiv .width();

并检查条件

if(primaryWidth < 915){ primaryDiv.find(".bricks").addClass("width90"); }else{ primaryDiv.find(".bricks").addClass("width45"); }

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

1 个答案: