javascript - 当我改变容器 <div> 的宽度时，里面的 <div> 也应该相应地改变

Question

我有一个 parent <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%;
}