使内部元素比父元素宽一定量

Question

我在另一个元素中有一个元素，我希望内部元素比父元素宽一些 - 比如说40px。如果父级宽度为500px，它看起来会像这样：

但是，如果父母宽度为600px，我希望这个孩子的宽度为640px。

如果不将外部元素绑定到任何特定宽度，我希望内部元素总是比外部元素宽40px。是否只有CSS实现此目的？

Answer 1

您可以使用calc。

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

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

Answer 2

我不知道宽度增加，但你可以通过css给出内部div的填充，这可能适合你。

你可以像

一样给你内在的div

.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

Answer 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

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

希望这有帮助