用css设置div元素位置

Question

我有 2 个 div 。它们是 div1 和 div2 。

我的 div1 具有以下样式属性：

.div1{
position:absolute;
left:0%;
top:0%;
width:auto;
height:auto;
}

还有我的 div2：

.div1{
position:absolute;
left:0%;
top:0%;
width:auto;
height:auto;
}

我想将我的第二个 div 设置为正好在我的 div1 之下，并且每当我的 div1 的高度或宽度发生变化时，我的 div2 也会发生变化并且仍然正好在 div1 之下。

请帮忙。

Answer 1

如果您希望div2 位于div1 之下，那么position: relative 应该这样做。如果您希望div2 模拟div1 的元素，在这种情况下，如果div1 的宽度增加并且您希望div2 的宽度增加，我将创建一个父div（在这种情况下为@987654328 @) 包含 div1 和 div2。遵循@Siyam Kumar 的示例。这是我想出的：

HTML：

       <div class="mainDiv">
            <div class=div1>
                <p>this is Div 1 content</p>
            </div>
            <div class=div2>
                <p>this is Div 2 content</p>
            </div>
        </div>  

CSS：

.mainDiv{
        padding:50px;
        width: 30px; <!-- you control both div1 and div2 here -->
    }

    .div1{
        position:absolute;
        left:0%;
        top:0%;
        width:auto;
        height:auto;
    }

    .div1{
        position:relative;
        left:0%;
        top:0%;
        width:auto;
        height:auto;
        background-color:#AAA;
    }

所以使用mainDiv 控制你的div。所以如果你改变高度，那么所有的div都会调整到mainDiv中指定的高度。

Answer 2

如果您确实需要绝对位置，请将两个 div 包装到具有绝对位置的容器 div 中，然后将 div1 和 div2 都更改为相对位置。应该可以的

Answer 3

将 div2 位置设置为相对位置。

HTML：

<div class="div1">adsf</div>
<div class="div2">adfad</div>

CSS：

div1{
position:absolute;
left:0%;
top:0%;
width:auto;
height:auto;

}
.div2{
position:relative;
left:0%;
top:0%;
width:auto;
height:auto;
background-color:#AAA;
}