有没有办法让孩子DIV的宽度比父DIV使用CSS？ [英] Is there are way to make a child DIV's width wider than the parent DIV using CSS?

问题描述

有一种方法可以在父容器DIV中拥有比其父容器更宽的子DIV。子DIV需要与浏览器视口的宽度相同。

Is there a way to have a child DIV within a parent container DIV that is wider than it's parent. The child DIV needs to be the same width of the browser viewport.

参见下面的示例：

See example below:

子DIV 必须留作父母的子div。我知道我可以在子div上设置任意负边距，使其更宽，但我不能解决如何基本上使其100％的浏览器宽度。

The child DIV must stay as a child of the parent div. I know I can set arbitrary negative margins on the child div to make it wider but I can't work out how to essentially make it 100% width of the browser.

我知道我可以这样做：

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

但我需要孩子的浏览器。

But I need the child to be the same width as the browser which is dynamic.

感谢您的回答，似乎最近的答案是让孩子DIV位置：绝对，并将左右属性设置为0.

Thanks for your answers, it seems the closest answer so far is to make the child DIV position: absolute, and set the left and right properties to 0.

我遇到的下一个问题是父级的位置：relative，这意味着左右属性仍然是相对于父div而不是浏览器，请参见示例： jsfiddle.net/v2Tja/2

The next problem I have is that the parent has position: relative, which means that left and right properties are still relative to the parent div and not the browser, see example here: jsfiddle.net/v2Tja/2

我无法从父母中删除相对位置，而无需将其他所有东西都拧紧。

I can't remove the position relative from the parent without screwing everything else up.

推荐答案

使用绝对定位

.child-div {
    position:absolute;
    left:0;
    right:0;
}

这篇关于有没有办法让孩子DIV的宽度比父DIV使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！