Условный CSS на основе div, а не screen

Question

Поэтому я провел некоторое исследование и близок к ответу, но то, что я пытаюсь сделать, может оказаться невозможным только с помощью CSS, и я действительно надеюсь, что это так.

Конечная цель состоит в том, чтобы установить ширину элементов с классом кирпичей равной 90%, если ширина элемента с идентификатором основного составляет 915 или меньше.

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%;
    }
}

В настоящее время это работает и устанавливает ширину элементов с кирпичами как класс на 90%, если размер экрана меньше 915 пикселей. Однако подвох заключается в том, что существует динамический контент, который может или не может быть перемещен слева и справа от элемента с идентификатором основного. Это означает, что размер экрана не всегда определяет ширину элемента.

Вопрос: есть ли способ установить условный CSS для .bricks используя только CSS (без javascript/php/etc.) в зависимости от ширины #primary не размер экрана?

Я знаю, что это легко сделать с помощью javascript, но для его работы с другими плагинами javascript/jQuery необходимо установить CSS в таблице стилей CSS, а не в атрибуте style элемента.

Answer 1

Невозможно поместить условие if на ширину div.

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");
}