如何通过CSS使DIV捕捉到网格？

Question

我正试图弄清楚如何通过CSS将DIV列捕捉到某个固定大小的网格。

以下是我正在处理的测试页：http://mapofemergence.com/test/MoEv2/

我想要得到的是正确的div（绿色的）在某种程度上捕捉到背景网格四边形：当调整浏览器窗口大小时，红色四边形应该分布在中间区域，而绿色列应该“填写“页面右侧的剩余区域，但仍然始终与网格对齐（左侧）。

基本上，当 a 网格的四边形大小时，右边的绿色div应该具有可变宽度，等于或大于 a ，并且无论如何都小于 2a （在这种情况下，它应该设置回 a 的宽度，同时还有一个红色四边形从下面一行移动到上面一行）。

这是一个可以获得更好主意的图片：

（抱歉，我的声誉不允许超链接）

我不确定这可以通过CSS完成，但我相信你们中的一些人可以帮助找到一些解决方案或解决方法。如果可能，我不会使用javascript。

感谢您的帮助， 小号

Answer 1

不幸的是， HTML / CSS 没有必要的功能来执行您想要的操作。您只能使用 JavaScript 来实现它。

您应该将一个函数绑定到window 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)
        )
    );
});

请注意，此代码可以轻松优化，但我希望尽可能简化。