Javascript 创建一个流体侧栏，该侧栏将展开以与中心图元的边缘相交

放在一边{
身高：80%；
宽度：15%；
背景色：#0ee；
不透明度：0.25；
轮廓：2px#0bb实心；
位置：绝对位置；
最高：50%；
左：85%；
转换：翻译（-50%，-50%）；
}

网格
SVG网格

如果您想让它退出流程，那么一个选项是使用“幻数”。一个神奇的数字是你使用一个硬编码的特定值，这个值“刚好有效”。它很脆弱，但有时是必要的

为此，网格宽度为10雷姆。所以你可以这样做：

aside {
    position: absolute;
    right: 0;
    left: calc(50vw - 5rem); /* half width - 10rem / 2 */
}

---

编辑：

如果将SVG和

包装在一个元素中，这将更加容易。这是一个选项？@cjl750这是一个选项，只要它不干扰SVG的定位。我们还可以将aside元素和div元素包装为与SVG相同的大小，如果这有助于保留原始SVG的位置，则绝对定位父包装。您想要的技术是什么？我认为这里的
calc（）
函数会对您很好，并且更有意义。我猜SVG应该在页面中水平居中吗？您可以使用flex和伪元素。实际上，flex的优点是您不必考虑SVG（或任何中心元素）的大小，它适用于任何大小。我的第一个codepen示例必须处理并覆盖一些CSS规则和已链接的javascript，这可能就是为什么您没有意识到通过flex实现这一点有多么简单；）侧边的边缘与网格和浏览器窗口边缘匹配如何？如果网格设置为固定宽度（10rem），则这将考虑到这一点（左侧距离左侧50%（因此在中间）+网格宽度的一半，因此将对齐）。它不整洁，但应该在那里工作。如果在其他断点上不起作用，我们也可以考虑解决这个问题。谢谢你对这个问题的兴趣。以各种方式尝试这段代码，但看不出这是如何解决问题的。也许您可以提供一个代码片段或JSFIDLE？当然不用担心。我已经用一个JSFIDLE编辑了我的答案，并将其显示在实际操作中。请注意，您需要删除水平变换，因为这会弄乱它。不错。一点也不坏，即使没有使用JavaScript或过多的CSS。干得好，对我来说很有用：