如何使用 CSS 使子 div 元素比父 div 元素更寬？

在 CSS 中，有時您希望將子 div 擴充套件到其父 div 之外，這要歸功於給定內容的一些特定特徵。在 CSS 中，這通常是適得其反的，因為大於其父級的 div 將會被裁剪，但可以修改某些屬性以使其工作。

使子 div 比父 div 更寬

這主要可以透過兩種方式完成，一種是使用 overflow 屬性，另一種是更改 position 屬性。

  • 步驟 1 - 使用溢位：如果父容器足夠大，這種情況就不會成為問題，但是當有人嘗試設計時，他們最終會超出父容器，這將不是很好。要讓子元素擴充套件到其父容器之外，應將父容器的可見屬性設定為 visible。
  • 步驟 2 - 使用定位：在這種情況下，父元素將獲得相對定位，而其子元素將獲得絕對定位。子容器需要為其分配值，以便其超出父容器的左右限制。

使子 div 超出父 div 寬度

在下面的示例中，我們將建立一個寬度為 200 畫素的父容器和一個寬度為 300 畫素的子容器。子 div 將擴充套件到父容器之外，我們將應用 overflow: visible 以確保顯示額外的寬度。

示例程式碼

<!DOCTYPE html>
<html>
<head>
    <title>Make a Child div Element Wider than Parent div</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            font-family: Arial, sans-serif;
            min-height: 100vh;
            margin: 0;
            align-items: center;
        }

        .parent {
            width: 200px;
            height: 300px;
            background-color: blue;
            color: white;
            overflow: visible;
        }

        .child {
            width: 300px;
            height: 200px;
            background-color: green;
            position: relative;
            left: -50px;
            top: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="parent">
        Parent div Section
        <div class="child">
            Child div Section
        </div>
    </div>
</body>
</html>

輸出


更新於： 2024-11-12

15 次檢視

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告