Как сделать привязку DIV к сетке через CSS?

Question

Я пытаюсь выяснить, как привязать столбец DIV к некоторой сетке фиксированного размера с помощью CSS.

Вот тестовая страница, над которой я работаю: http://mapofemergence.com/test/MoEv2/

То, что я пытаюсь получить, - это правильное деление (зеленое), так или иначе привязывающееся к фоновым квадрам сетки: при изменении размера окна браузера красные квады должны распределяться в средней области, тогда как зеленый столбец должен " заполните «оставшуюся область с правой стороны страницы, оставаясь всегда выровненными (слева) по сетке.

По сути, если a размер квада сетки, то правый зеленый div должен иметь переменную ширину, равную или превышающую a , и в любом случае меньшую, чем 2a (в этом случае следует установить ширину a , при этом еще один красный квад переместится из нижнего ряда в верхний).

вот изображение, чтобы получить лучшую идею:

(извините, моя репутация не позволяет гиперссылок)

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

Спасибо за вашу помощь, s

Answer 1

К сожалению HTML / CSS не имеет функций, необходимых для того, что вы хотите. Вы можете достичь этого только с помощью JavaScript .

Вам следует привязать функцию к окну resize событие, которое установит желаемое значение ширины div зеленого цвета. В jQuery это должно выглядеть примерно так:

$(window).resize(function() {
    $("#rx").width(
        parseInt($("#rx").css("min-width").slice(0, -2)) + (
            ($(window).width() - $("#lx").width() - $("#rx").css("min-width").slice(0, -2)) % $(".module:first").outerWidth(true)
        )
    );
});

Обратите внимание, что этот код можно легко оптимизировать, но я хотел сделать его максимально простым.