先下结论

您可以通过像这样设置内部元素的样式来实现这一点:

  .inner {
    width: 100vw;
    margin-left: calc(calc(100% - 100vw) * 0.5);
  }

示例 CodePen。

看笔无标题由凯图@kaitou1192) 上代码笔.

你为什么这样说话?

在 HTML & CSS 的第一阶段,可能会设置 wrapper 元素来控制整体页面宽度和屏幕宽度,但在以后的改进中,打印图像区域和导航的宽度将大于 wrapper 元素的宽度。很少有人要求我做我想做的事。

如果突出的元素在包裹元素的上方或下方,有办法把它从包裹元素中拿出来,但是如果它从中间出来,就不可能分割包裹元素了……你也可以花夜晚。

还有一种方法可以让 JS 做到最好,但在这种情况下,它将与窗口调整大小结合使用,因此它往往是一种缓慢的行为。

在这种情况下,如果有一种仅使用 CSS 的快速方法会很方便。

观点

由于等宽元素为px,全宽元素为vw,所以当宽度小于固定宽度时,行为往往很可疑,所以使用@media不小于固定宽度元素。我觉得即使我在这里使用Math.max() 也可以做得很好,但我现在正在处理媒体查询。


原创声明:本文系作者授权爱码网发表,未经许可,不得转载;

原文地址:https://www.likecs.com/show-308632392.html

分类:

技术点:

CSS

相关文章: