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