使元素x像素宽于其液体宽度容器？

Question

我有一个液体宽度和20px填充物的容器。我希望大多数包含的元素都遵守填充。然而，我想忽略一些元素填充和宽度与容器本身相同。这有可能用CSS吗？

我知道我可以将边距应用于包含的元素，但是由于我的实际html的复杂性，这不是理想的。

<div class="cont">
  <div class="item-normal">Normal Item</div>
  <div class="item-wide">wide Item</div>
  <div class="item-normal">Normal Item</div>
  <div class="item-wide">wide Item</div>
  <div class="item-normal">Normal Item</div>
</div>

body {
  padding: 0;
  margin: 0;
}
.cont {
  background: grey;
  padding: 20px;  
}
.item-normal {
  background: blue;
  margin-bottom: 10px;
}
.item-wide {
  margin-left: -20px;
  background: gold;
  margin-bottom: 10px;
}

Answer 1

将margin-right:-20px;添加到.item-wide：

.item-wide {
    margin-left: -20px;
    background: gold;
    margin-bottom: 10px;
    margin-right:-20px;
}

<强> jsFiddle example

您还可以将该规则中的三个单独边距合并为margin: 0 -20px 10px;

Answer 2

也可以添加margin-right: -20px。

http://jsfiddle.net/ebheP/