Question

我有2个div，一个外部div，它是父级和子级div。外部div是位置相对，左侧和右侧的填充为20px，而子级为绝对位置，宽度为100％。如何强制绝对位置的子进程在父级内，即尊重填充20px（父级内部和20px填充内）

我在这里做了一个例子：http://www.bootply.com/nyGZzTVY8v

我读过有关盒子大小的内容，但我仍然不明白如何正确实现它。尝试将它放在box1类上并且什么都没发生，尝试穿上box2类并且没有任何事情发生。

提前感谢。

附加说明：它必须是响应，即我不知道父div的大小，因此孩子div的100％。

Answer 1

只需设置left: 20px;和right: 20px;，然后移除width: 100%

即可

Live Demo

.box2 {
    position: absolute;
    padding: 50px 0;
    color: #000;
    background: #fff;
    left: 20px;
    right: 20px;
    border: solid thin #06F;
}

或添加left: 20px;和calc function width: calc( 100% - 40px )

.box2 {
position: absolute;
width: calc( 100% - 40px );
padding: 50px 0;
color: #000;
background: #fff;
left: 20px;
border: solid thin #06F;
}

live Demo

Answer 2

如果必须有响应，可以将填充作为边距添加，然后使用calc作为宽度：

.box2 {
    position: absolute;
    width: calc(100% - 40px);
    left: 0px;
    padding: 50px 0;
    margin: 0 20px;
    colour: #000;
    background: #fff;
    border: solid thin #06F;
}

Answer 3

一旦你使用绝对位置，div就不会在它的父div中。你可以使用position relative with并给它width:inherit这将继承父div的宽度

Answer 4

这很完美，请尝试一下。父div应该具有相对位置，子div可以具有您想要的绝对位置。

.box1 {
    width: 50%;
    margin: 10px;
    position:relative;
}
.box2 {
    display: block;
    position: absolute;
    width: 100%;
}

Answer 5

我最近经历了这个问题，并通过设置子容器的左和右解决问题找到了解决方案。

如果您希望子容器具有相同的父填充，例如padding：0 10px，即左右。然后我们需要将子容器的左右设置为与父填充相同的值。

.box1 {
  position: relative;
  padding: 0 10px;
}
.box2 {
  position: absolute;
  left: 10px;
  right: 10px;
}

查看密码笔 click here

如何强制使用100％宽度的绝对位置以适合带填充的父div？

5 个答案: