如何在 CSS 中使內容溢出超出容器的寬度？

在 CSS 中將內容擴展到容器寬度之外

使用響應式網格時，通常需要有一個擴展到特定寬度的包含 div。但是，在某些情況下，您可能希望內容溢出超出容器的寬度。

請考慮以下 CSS 範例：

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding: 0 30px;
  width: 100%;
}

此容器擴展至最大寬度 1280px 並添加填充到其左側和右側。預設情況下，此容器內的內容將在其定義的寬度內換行。

要允許內容溢出超出容器的寬度，您有兩個選項：

1。使用附加 Div

最簡單的解決方案是關閉初始容器並打開一個擴展到螢幕整個寬度的新 div。然後，您可以將所需的背景顏色或圖像套用到此全角 div。

2.刪除容器

在某些情況下，您可能根本不需要包含 div。只需移除容器並讓全角 div 填充可用空間即可。當您只需要實現全角背景而無需在其寬度之外添加任何其他內容時，此方法非常有效。

範例程式碼：

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Content</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

透過了解這些方法，您可以建立響應式設計，在必要時容納超出容器寬度的溢位內容。

以上是如何在 CSS 中使內容溢出超出容器的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！