如何用底层类覆盖css类

Question

我写了一段这样的 CSS 小代码，

<div class="wrapper">
    the wrapper has width:1120px;  everything inside it
    <div class="callout">
        I want this to be full width rather than width 1120px
    </div><!-- end for callout -->
    other things inside it normal at width 1120px
</div><!-- end wrapper -->

我怎样才能做到这一点我怎样才能禁用其中特定类的包装行为

Answer 1

处理这种情况的一种标准方法是在结构标记中添加.callout 下方（重要的是，外部）.wrapper...

...然后使用 css 将 .callout 推回显示，使其不再出现在浏览器显示中的 .wrapper 下方。

当然，如果你采用这种方法，你必须确保留出足够的空间让.callout向上移动。

.wrapper {
width: 1120px;
border: 1px solid red;
}

div p {
height: 40px;
line-height: 40px;
margin: 20px;
}

.wrapper p:nth-of-type(2) {
margin-bottom: 80px;
}

.callout {
position: relative;
top: -140px;
background-color: blue;
}

<div class="wrapper">
<p>the wrapper has width:1120px;</p>
<p>everything inside it</p>
<p>other things inside it normal at width:1120px</p>
</div>

<div class="callout">
<p>I want this to be full width rather than width:1120px</p>
</div>

Answer 2

你写道：“我写了一段类似这样的 css 小代码”

我假设你知道这是 HTML，不是 CSS。如果这不很清楚，那么你就错过了基础知识。无论如何：

（这不是复制和粘贴代码的解决方案，但它解释了为什么你不能轻松地做你想做的事情，以及如果你想做的话你可以做什么......）

通常你可以通过给它width: 100% 来实现块元素的全宽。但是，百分比宽度值始终与父元素相关（在您的情况下为 .wrapper，而不是窗口宽度）。您可以使用 javascript/jQuery 获取视口/窗口宽度并将其分配给您的 .callout 类。如果这样做，您还必须在 CSS 中添加 .wrapper {overflow-x: visible;}，否则 .callout 的最大宽度仍将限制为包装器的宽度。

另一种解决方案是将.callout DIV not 在 HTML 中的 .wrapper DIV 内（但在它之后或之前），因此它独立于它。然后你可以简单地为.callout 定义width: 100%。您还可以在 .callout DIV 之前 和 之后拥有类 .wrapper 的 DIV。

您也可以通过将position: absolute 用于.callout 来实现独立的宽度，但是，在这种情况下，绝对定位的元素被视为完全 独立（除了位置引用），这意味着它也会在父元素中为它保留 no 垂直或水平空间，这可能导致父元素的内容被隐藏或以非预期的方式显示。 （在父内容继续之前，您必须在父元素中插入一些内容，为绝对定位的子元素创建足够的垂直空间。但是这个解决方案不是很好，因为所需的垂直空间将始终取决于屏幕/视口宽度和内容。

Answer 3

如果你必须只使用html 和css 来实现它，我想你可以用另一种方式：

<section>
  <div class="wrapper">
    ...
  </div>
</section>

<section>
  <div class="callout">
    ...
  </div>
</section>

<section>
  <div class="wrapper">
    ...
  </div>
</section>

CSS

.wrapper {
  width: 1120px;
}
...

Answer 4

如果您想保留当前标记并且不进行任何更改（如其他人所述），您可以使用 position 属性，如下所示：

标记

<div class="parent">
    <p>parent</p>
    <div class="wrapper">
        <p>wrapper</p>
        <div class="callout">
            <p>callout</p>
        </div><!-- end for callout -->
    </div><!-- end wrapper -->
</div><!-- end parent -->

CSS

.parent{
  position: relative;
}

.wrapper{
  width: 1120px;
  margin: 0 auto;
}

.callout{
  position: absolute;
  left: 0;
}

在行动

.parent{
  position: relative;
  height: 300px;
  padding: 10px 0;
  background-color: #99ff99;
  text-align: center;
}

.wrapper{
  width: 200px;
  margin: 0 auto;
  height: 100px;
  padding: 30px 0;
  background-color: #ff9999;
}

.callout{
  position: absolute;
  width: 100%;
  height: 50px;
  left: 0;
  background-color: #9999ff;
}

<div class="parent">
    <p>parent</p>
    <div class="wrapper">
        <p>wrapper</p>
        <div class="callout">
            <p>callout</p>
        </div><!-- end for callout -->
    </div><!-- end wrapper -->
</div><!-- end parent -->