使内部元素比父元素宽一定数量答案

【问题标题】：Make inner element wider than parent element by a set amount使内部元素比父元素宽一定数量
【发布时间】：2015-03-17 05:04:30
【问题描述】：

我在另一个元素中有一个元素，我希望该内部元素比父元素宽一定数量 - 比如说 40px。所以如果父级是 500px 宽，它看起来像这样：

但是，例如，如果父级为 600 像素宽，我希望子级为 640 像素宽。

在不将外部元素绑定到任何特定宽度的情况下，我希望内部元素始终比外部元素宽 40 像素。有没有唯一的 CSS 方法来实现这一点？

【问题讨论】：

我建议你用@vikas 回答。

标签： html css

【解决方案1】：

您可以为此使用calc。

对于内部 div，只需提供以下详细信息

.inner {
    width: calc(100% + 40px);
}

【讨论】：

该死，打败我！ +1 有用的答案。

【解决方案2】：

我不知道宽度增加，但你可以通过 css 为内部 div 提供填充，这可能对你有用。

你可以给你的内部 div css 喜欢

.innerDiv {
    /*padding-right: 20px; */
     padding:20px;  /*this will give to left and right side 20px padding*/
}

How to increase an width:auto DIV's width by X pixels using pure CSS

【讨论】：

我选择这个作为答案，因为它受益于更广泛的浏览器支持。（您可能还提到要使其正常工作，box-sizing 必须设置为 content-box）。

【解决方案3】：

你可以试试这个

HTML

<div id="parent">Parent Content
    <div id="child">Child content</div>
</div>

CSS

#parent {
    width:500px;
    min-height:200px;
    border:2px solid green;
    color:green;
    font-weight:bold;
}
#child {
    width:100%;
    min-height:200px;
    padding:0 20px;
    border:2px solid red;
    color:red;
}

Fiddle Sample

Another Demo

【讨论】：

填充的问题是div内的可用区域仍然是父级的100%

【解决方案4】：

您可以在 CSS 中使用计算功能。

div.parent {
    height:150px;
    width:300px;
    background:#f00;
}
div.child {
    height:100px;
    width:calc(100% + 40px);
    z-index:1;
    background:#0f0;
}

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

希望对你有帮助

【讨论】：