如何在CSS中覆盖父容器宽度属性[重复]答案

【问题标题】：How to override parent containers width property in CSS [duplicate]如何在CSS中覆盖父容器宽度属性[重复]
【发布时间】：2016-01-12 20:24:09
【问题描述】：

我无法在我的 CSS 中覆盖父级的宽度。本质上，我有一个父母和一个孩子的 div，比如：

.parent{ width: 768px; background-color: red; }
.child{ background-color:blue; }

<div class="parent">
    <div class="child">
        //content
    </div>
</div>

很多元素仍然使用 768px 宽度的 parents 参数，但是我希望这个特定的子元素能够扩展屏幕的整个宽度 - 我尝试过 left: 0, right: 0, 清除浮动和设置自动宽度。如果可以的话，我也想避免使用 !important。

有什么建议吗？

我想要的准确表示如下：

   _____   
  |par. |
 _|_____|_
| child   |
|         |
|_________|
  |     |
  |_____|

【问题讨论】：

你在使用引导程序吗？
@WilliamPaul 请不要删除人回答的问题！！！我们需要时间和精力来回答，你会简单地删除它，是吗？有礼貌...
问题被标记为社区标记的更完整回答问题的副本。这个没必要在这里

标签： html css

【解决方案1】：

这样做，使用填充和边距（margin-left 和 margin-right 和 padding-left 和 padding-right）来实现。

<div class="parent">
  <p>This is parent</p>
  <div class="child">
    <p>This is child</p>
  </div>
  <p>This is still parent</p>
</div>

.parent{ width: 468px; background-color: red; margin: 0 auto; }
.child{
  background: blue;
  margin-left: -300vw;
  padding-left: 300vw;
  margin-right: -300vw;
  padding-right: 300vw;
}

http://cssdeck.com/labs/full/6xljy6pz

【讨论】：

您好，减法值的问题是它不能保证子容器将对齐到屏幕的末尾，因为每个用户的屏幕尺寸可能会有所不同。有没有办法让自动设置覆盖并从屏幕的左边缘开始？

【解决方案2】：

试试这个https://jsfiddle.net/7txe5eev/。这将为您计算和设置保证金。我假设您使用的是引导程序，但如果您获得了逻辑，您可以修改它以适合您的代码。

HTML

<div class="container">
<div class="row">
    <div class="col-xs-offset-3 col-xs-6 parent">
        <div class="row">
            <div class="col-xs-12 divs red"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 divs green special"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 divs blue"></div>     
        </div>
    </div>
</div>

CSS

.divs {
    height: 200px;
    margin: 5px auto;
}

.red {
    background-color: red;
}

.green {
    background-color: green
}

.blue {
    background-color: blue;
}

.special {
    width: 100vw;
}

$(document).ready(calcMargin);

$(window).resize(calcMargin);

function calcMargin() {
    var width = $('.parent').width() - $('.special').width();
    var leftMargin = width/2;

    $('.special').css('margin-left', leftMargin);
}

【讨论】：

【解决方案3】：

有点老套，但它可以工作（在支持 calc 和 vw 的浏览器中）：http://jsfiddle.net/tvg2ocvs/

margin-left: calc(-50vw + (768px/2));
margin-right: calc(-50vw + (768px/2));

虽然当视口小于 768 像素时看起来不太好，但媒体查询无法解决任何问题 :)

【讨论】：