在不使用位置元素的情况下在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' />