Question

我有两个div：

<div class="outer">
    <div class="inner"></div>
</div>

然后我给他们这样的风格：

    .outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%;}
    .inner{ background:red; position:absolute; margin:0 11px; width:100%; height:80px;}

我希望“内部”处于“外部”，左右两个都有11px空间，但它无法实现，只有左边有11px间隙，“内部”似乎总是有相同的长度为父亲的长度

然后我想也许用11px设置外部填充会起作用。但是，它仍然不起作用......

为什么会发生这种情况？那么我该如何解决这个问题呢？这可能会产生影响吗？

Here is the only case

Answer 1

边距将加起来已经拉伸到外部DIV的宽度（width 100%）你可以做的是以下内容 - link：

.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%; padding: 0 11px}
.inner{ background:red; height:80px;}

Answer 2

从position: absolute;删除relative（或将其更改为width: 100%;）和.inner将完全符合您的要求。然后，如果您确实需要一个内置position: absolute;的元素，请将其放在.inner。

中

An example

绝对位置元素的边距如果在另一个绝对位置元素中没有效果？

2 个答案: