如何使用 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 和整個視口寬度。

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