当前位置：文江博客话题详情

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

发布于 2024-10-01 00:30:14 字数 639 浏览 3 评论 0原文

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

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

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

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

这是一个更好的想法的图像：

alt text

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

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

感谢您的帮助， s

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

燃情 2024-10-08 00:30:14

不幸的是，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)
        )
    );
});

请注意，此代码可以轻松优化，但我想让它尽可能简单。

Unfortunately HTML/CSS don't have features necessary to do what you want. You can only achieve it by using JavaScript.

You should bind a function to window resize event which will set green's div width to desirable value. In jQuery it should look something like that:

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

Note that this code can be easily optimised but I wanted to make it as simple as possible.

回复收藏 0 原文

~没有更多了~