获取内部div适应外部div宽度与填充

-1

这可能是一个微不足道的问题，但正如你可以看到this fiddle我有一个内部和外部的div。外部div在身体上具有百分比宽度，内部div应该与外部div完全一样宽。获取内部div适应外部div宽度与填充

<div id="container"> 
    <div id="content">Content</div> 
</div>

问题是，内部div宽度不适应外部div的填充。我如何让内部的股利来做到这一点？

这样做的目的是，div应该是由输入字段和也具有百分比宽度和填充的选择框组成的表单的一部分。现在div应该与其他表单元素一样宽，填充为。

来源

2015-08-27 Kai Schneider

因此，从外层div拆下左/右填充？ – Vucko

或设置'margin：-10px;'内部div – Shehary

我不行。我需要div宽度为80％+ 20px; –

#container { 
 
    width:80%; 
 
    border: 1px solid red; 
 
    padding: 10px; 
 
} 
 
#content { 
 
    border: 1px solid blue; 
 
    padding: 0 10px; 
 
    margin-left:-10px; 
 
    margin-right:-10px; 
 
    }

<div id="container"> 
 
    <div id="content">Content</div> 
 
</div>

来源

2015-08-27 12:18:45 chandni

我删除了左侧和右侧填充。

试试这个

#container { 
    width:80%; 
    border: 1px solid red; 
    padding: 10px 0px 10px 0px; //changed this 
}

Demo here

来源

2015-08-27 11:26:59

但是我需要填充作为80％宽度的补充 –

只要改变容器上的填充。此外，除非另有说明，块级元素的宽度将为100％。

http://codepen.io/anon/pen/wKwoPJ

#container { 
    width:80%; 
    border: 1px solid red; 
    padding: 10px 0px; 
} 
#content { 
    border: 1px solid blue; 
}

来源

2015-08-27 11:29:02

http://jsfiddle.net/mz0zt89k/2/ Nope –

从父取下左右填充，并把它添加到子元素。使用box-sizing和border-box将确保孩子的1px边框将保留在父元素内。

html { 
 
    box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 
#container { 
 
    width:80%; 
 
    border: 1px solid red; 
 
    padding: 10px 0; 
 
} 
 
#content { 
 
    border: 1px solid blue; 
 
    padding: 0 10px; 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <div id="content"> 
 
    Content 
 
    </div> 
 
</div>

来源

2015-08-27 11:29:43 DavidDomain

这使得20px太小。 –

我想我误解了你的问题。你能详细说明你试图达到的目标吗？ - *问题是，内部div宽度不适应外部div的填充。*所以，你想让子div具有与父div相同的宽度吗？你还想为每个边，左边和右边的div div或parent div填充10px吗？你最后一段很混乱。孩子是表格的一部分，它是否会保存输入字段？ 20px对于什么来说太小了？ – DavidDomain

您可以将此CSS添加到#content -

width: calc(100% + 20px); 
margin-left: -10px;

全码 -

#container { 
 
    width: 80%; 
 
    border: 1px solid red; 
 
    padding: 10px; 
 
} 
 
#content { 
 
    border: 1px solid blue; 
 
    width: calc(100% + 20px); 
 
    margin-left: -10px; 
 
    box-sizing: border-box; 
 
} 
 
#othercontent { 
 
    margin-top: 10px; 
 
    border: 1px solid green; 
 
}

<div id="container"> 
 
    <div id="content"> 
 
    I'm not following the padding 
 
    </div> 
 
    <div id="othercontent"> 
 
    I'm following.. 
 
    </div> 
 
</div>

来源

2015-08-27 11:50:12

获取内部div适应外部div宽度与填充

回答

相关问题