Question

我正在尝试创建div#firstdiv。在div中，我有其他div#otherdiv，其宽度是#firstdiv的％。此外，这个其他div还有一个特定的边距，不应该受到另一个#otherdiv的影响，但我的问题是当我做position :absolute; widht:100% #otherdiv走到#firstdiv之外时。让我们看一个例子。我有：

<div style=" width: 500px; border: 2px solid red; height: 150px; >
     <div style="width: 100%; position: absolute; border: 1px solid blue; >here<div>
</div>

我有以下结果：

我希望蓝色div在红色内部。如果我这样做position absolute如果我有另一个#otherdiv 保证金左边取决于已经存在的东西，我不希望这样。

我改变了什么：我正在使用bootstrap，而我的这两次潜水都在里面

<div class="container-fluid container-first"><div class="container">

Answer 1

将position relative添加到父级，如此

<div style=" width: 500px; border: 2px solid red; height: 150px; position: relative" >
             <div style="width: 100%; position: absolute; border: 1px solid blue;">here</div>
        </div>

Answer 2

absolute从正常的内容流中删除元素。其父项的行为就好像position:relative元素根本不存在一样。因此，您需要相对定位其父级。为其父级添加<div style=" width: 500px; border: 2px solid red; height: 150px; position: relative" > <div style="width: 100%; position: absolute; border: 1px solid blue;" >here<div> </div>即可。有关详细信息，请访问css-tricks

{{1}}

Answer 3

你不应该需要这个位置：绝对是你想要完成的。

带有蓝色边框的内部<div>元素应自动成为块类型元素并填充其父元素的宽度。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>        
</head>

<body>
    <div style="width: 500px; border: 2px solid red; height: 150px;">
        <div style="border: 1px solid blue;">
            here
        </div>
        <div style="border: 1px solid blue;">
            otherDiv
        </div>
    </div>

</body>

</html>

Answer 4

将float:left;放入内部div并删除position:absolute;这应该有效。

宽度100％超出父

4 个答案: