comment faire un accrochage DIV à une grille, via CSS?

Question

J'essaie de comprendre comment avoir une colonne DIV accrochant à une grille de taille fixe, via CSS.

est ici la page de test, je travaille sur: http://mapofemergence.com/test/MoEv2/

Ce que je suis en train de faire, est le droit div (le vert) claquant someway aux quadriceps de la grille de fond: lors du redimensionnement de la fenêtre du navigateur, les quads rouges devraient se répartir dans la zone centrale, tandis que la colonne verte devrait "remplir" la zone restante sur le côté droit de la page, tout en restant toujours alignée (sur la gauche) avec la grille.

Fondamentalement, étant un la taille quadruple de grille, la div verte droite devrait avoir une largeur variable, égale ou supérieure à un, et de toute façon mineure que 2a (auquel cas il convient de remettre à une largeur de un, tout en ayant un quad rouge de plus qui passe de la rangée inférieure à la rangée supérieure).

est ici une image pour avoir une meilleure idée:

(désolé, ma réputation ne permet pas de lien hypertexte)

Je ne suis pas sûr que cela peut être fait via CSS , mais je suis sûr que certains d'entre vous peuvent aider à trouver une solution ou une solution de contournement. Je n'utiliserais pas javascript, si possible.

Merci pour votre aide, de

Answer 1

Malheureusement HTML/CSS ne sont pas options nécessaires pour faire ce que vous voulez. Vous ne pouvez y parvenir qu'en utilisant JavaScript.

Vous devez lier une fonction à la fenêtre redimensionner événement qui définira la largeur div vert à la valeur souhaitable. Dans jQuery il devrait ressembler à quelque chose comme ça:

$(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) 
     ) 
    ); 
}); 

Notez que ce code peut être facilement optimisé, mais je voulais le rendre aussi simple que possible.