如何在 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中文网其他相关文章！