在 CSS 中如何使子 DIV 比其父級更寬？

將子 DIV 寬度擴展到父級限制

在 CSS 中，通常不建議使子 DIV 比其父級更寬。但是，如果您發現自己遇到這種情況，可以使用一些解決方案。

選項1：使用絕對定位

如果可以刪除子DIV從文檔流來看，您可以使用絕對定位將其寬度設置為瀏覽器視口的100%。請記住將 left 和 right 設為 0，以將子級從一個邊緣水平拉伸到另一個邊緣。

選項2：具有可計算邊距的通用解決方案

將子級DIV 保留在在文檔流中，您可以計算負邊距以達到所所需的寬度：

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

此解決方案可確保子級DIV保留在其父級內，同時擴展其寬度以填充視口。在此公式中：

• -50vw 將子DIV 向左移動視口寬度的一半
• 50% 透過添加父級寬度的一半來抵消此移動

與親屬的考慮定位

如果父DIV具有position:relative，則子DIV的left和right屬性將相對於父DIV。為了避免這種情況，您可以使用轉換屬性來平移子 DIV：

.child {
  ...
  transform: translate(-50%, 0);
}

這可確保子 DIV 超出父級的邊界，同時尊重其容器。

以上是在 CSS 中如何使子 DIV 比其父級更寬？的詳細內容。更多資訊請關注PHP中文網其他相關文章！