Question

我无法覆盖CSS中父级的宽度。基本上，我有一个父母和一个孩子div喜欢：

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

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

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

有什么建议吗？

我想要的准确表示如下：

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

Answer 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

Answer 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;
}

JS

$(document).ready(calcMargin);

$(window).resize(calcMargin);

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

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

Answer 3

有点hacky，但它有效（在支持calc和vw的浏览器中）：http://jsfiddle.net/tvg2ocvs/

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

虽然视口小于768px但看起来不太好，但媒体查询无法修复：）

如何在CSS中覆盖父容器width属性

3 个答案: