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

如果您必须仅使用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 3

你写道：“我写了一个很小的css代码，就像这样”

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

（这不是复制和可接受的代码解决方案，但它解释了为什么你不能做你想做的事情，以及如果你想要做什么你可以做什么......）

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

另一个解决方案是让.callout DIV 不在<{1}} DIV内（但在它之后或之前），因此它独立于它。然后，您只需为.wrapper定义width: 100%即可。您还可以在之前使用类.callout的DIV，在.wrapper DIV之后使用。

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

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 -->

如何用底层类覆盖css类

4 个答案: