Question

我有一个父<div>

.container{
    border:1px solid red;
    position:relative;
    top:20%;
    left:30%;
    height: 400px;
    width: 400px;
}

如果我改变父div的宽度，则子div（此处为框）的位置不会改变。

.box{                           
    border:1px solid red;
    position:absolute;
    width:10px;
    height:10px;  
    top: 20;  
}

如何解决这个问题？

Answer 1

你也可以设置％的位置：请检查此即：link

.container{
    border:1px solid red;
    position:relative;
    top:20%;
    left:30%;
    height: 400px;
    width: 200px;
}
.box{                           
    border:1px solid red;
    position:absolute;
    width:10px;
    height:10px;  
    top: 20%;  
    left: 20%;
}

Answer 2

尝试添加内部<div>的坐标％。它将根据父母的大小改变他的位置。

＆＃13;

.container{
    border:1px solid red;
    position:relative;
    top:20%;
    left:30%;
    height: 400px;
    width: 400px;

}
.box{                           
    border:1px solid red;
    position:absolute;
    width:10px;
    height:10px;  
    top: 20%; 
    left:20%; 
}

＆＃13;

<div class="container">
<div class="box"></div>
</div>

＆＃13;

当我更改容器<div>的宽度时，内部<div>也应相应地更改

2 个答案: