在不使用position元素的情况下在CSS中定位

Question

我需要在放大和缩小页面时不移动所有ID，而不使用相对，绝对或固定定位。当我放大和缩小而不是ID

时，我得到了外部，字母和数字框

.outer {
margin: auto;
border: 20px outset orange;
width: 80%;
overflow: auto;
}

.letters {
border: 10px solid red;
float: left;
width: 50%;
box-sizing: border-box;
}

.numbers {
border: 10px solid blue;
float: right;
width: 50%;
box-sizing: border-box;
clear: auto
}


#one {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: palegoldenrod;
text-align: center;
}

#two {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: salmon;
text-align: center;
margin-left: 120px;
}

#three {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: greenyellow;
text-align: center;
margin-left: 240px;
}

#four {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: plum;
text-align: center;
margin-left: 120px;
}

#five {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: thistle;
text-align: center;
}

#oneA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: palegoldenrod;
text-align: center;
float: right;
}

#twoA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: salmon;
text-align: center;
float: right;
margin-top: 120px;
}

#threeA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: greenyellow;
text-align: center;
float: right;
margin-top: 240px;
}

#fourA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: plum;
text-align: center;
margin-left: 502px;
margin-right: 120px;
float: right;
}

#fiveA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: thistle;
text-align: center;
margin-left: 622px;
float: right;
}

Answer 1

是否有任何元素应该移动？如果不是我建议禁用缩放：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />