如何使用 CSS 使子 DIV 比其父级更宽？

使用 CSS 将子 DIV 宽度扩展到父边界之外

使用 CSS 将子 DIV 的宽度扩展到其父容器之外是可行的。这使得子 DIV 能够延伸到整个浏览器视口。

通用解决方案

要实现此目的，请在子元素上使用以下 CSS 属性：

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

• 宽度：100vw；将子项的宽度设置为视口的 100%，跨越整个浏览器窗口。
• position:relative;确保子级的位置相对于其父级，允许进行调整。
• left: calc(-50vw 50%);将子级的左边缘偏移视口的 50% 减去父级宽度的 50%，使其与浏览器的左边界对齐。

示例

<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: #ccc;
}

.child {
  height: 100px;
  border: 1px solid #000;
  background-color: #fff;
}

此示例创建一个 400px 宽的父 DIV 和一个扩展的子 DIV整个视口宽度。

以上是如何使用 CSS 使子 DIV 比其父级更宽？的详细内容。更多信息请关注PHP中文网其他相关文章！