Question

我的情况是div外padding，div内部padding。但是，我希望某些内部div基本上“不受外部div的{{1}}”的影响。我希望它们能够明显地扩展外部div的整个宽度。

为了给出一个具体的场景，我想要的是下面的蓝色div触及左右两侧的黑色墙壁，同时保持其内部文本与左边对齐红色div的。 不幸的是，一个限制是我需要保留外部div的填充，因为我正在使用全局样式表，如果我更改填充的填充，我的网站的许多子页面将被破坏外部的div 。我需要以可靠的方式做到这一点，因为它会被重复使用几次。

div.outer {
  border: 1px solid #000;
  padding: 20px;
}
div.inner {
  background: red;
  padding: 5px;
}
div.inner.expand {
  background: blue;
}

<div class="outer">
  <div class="inner"><p>Here's some content</p></div>
  <div class="inner"><p>Here's some more content</p></div>
  <div class="inner"><p>Here's some more content</p></div>
  <div class="inner expand"><p>Here's some more content</p></div>
  <div class="inner"><p>Here's some more content</p>   </div> 
  <div class="inner expand"><p>Here's some more content</p>   </div> 
</div>

小提琴手，伙计们：http://jsfiddle.net/2whug2af/2/

Answer 1

由于填充为20px宽，您可以使用负边距来抵消它：

div.inner.expand {
    margin: 0 -20px;
}

div.outer {
  border: 1px solid #000;
  padding: 20px;
}
div.inner {
  background: red;
  padding: 5px;
}
div.inner.expand {
  background: blue;
  margin: 0 -20px;
}

<div class="outer">
  <div class="inner"><p>Here's some content</p></div>
  <div class="inner"><p>Here's some more content</p></div>
  <div class="inner"><p>Here's some more content</p></div>
  <div class="inner expand"><p>Here's some more content</p></div>
  <div class="inner"><p>Here's some more content</p>   </div> 
  <div class="inner expand"><p>Here's some more content</p>   </div> 
</div>

让div在其父级之外浮动，而不使用position：absolute

1 个答案: