ズームアウト時にウェブサイトのレイアウトが移動する

Question

私はグーグルにしようとしましたが、スタッフのほとんどは「内部要素の絶対位置を使用して修正します」と言っていますが、コンテナ内のボックスの余白が必要です。

これはコードです：

HTML：

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

はCSS：

.main_container{ 
    position: relative; 
    top: 49px; 
    background-color: orange; 
    height : 1446px; 
    width: 1496px; 
    margin: auto; 
    z-index: 5; 
} 

.container{ 
position: relative; /* I tried using position absolute too, but it didnt work */ 
    background-color: white; 
    top: 0; 
    right: 200px; 
    width: 1098.8px; 
    min-width: 1098.8px; 
    max-width: 1098.8px; 
    height: 1041px; 
    margin: 0 auto; 
} 

.box{ 
position: relative;/
    top: 50px; 
    border: solid; 
    border-color: grey; 
    width: 208px; 
    height: 335px; 
    margin-right: 2px; 
    margin-bottom: 3px; 
    display: inline-block; 
} 

私はこれをどのように修正する必要がありますか？ボックスをズームインまたはズームアウトするたびに移動しますか？私は文字通りこの状況を解決しようと一日を費やしましたが、運はありません。

Answer 1

this questionをご覧ください。彼らはあなた自身と同じ問題を抱えているようですが、境界よりも状態を与えられた答えは、内部のDIVタグの中に入れておくことで保つことができます。 floatを使用してコンテナを定位置に保持することをお勧めします。コードから左右に並べる場合は、float: left;を使用します。これは、左から順に並んでいます。 JSFiddleのデモをチェックしてください。here