Sitenin Düzenlenmesi

Question

'a yakınlaştırıldığında/değiştirildiğinde google onu değiştirmeye çalıştım ancak insanların çoğu "iç elemanlar için pozisyon mutlakı kullanıp düzeltecek" diyor ama ben bunu yapmak istemiyorum Kutulardaki kutular için kenar boşlukları istiyorum.

Bu

kodudur:

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: bunu düzeltmek gerekir nasıl

.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; 
} 

? Yakınlaştırma veya uzaklaştığımda kutular değişiyor mu? Bütün gün bu durumu düzeltmeye çalışıyorum ama şansım olmadı.

Answer 1

this question'a bakın. Kendinizle aynı meseleye sahipler gibi görünüyorlar, ancak sınırları verilen durumlardan daha fazla olan cevaplar, iç DIV etiketlerinin içine yerleştirilerek tutulabilir. Konteynerleri şamandıra kullanarak yerinde tutmak için, kodunuzda sizin tarafınızdan yan yana olacak şekilde, float: left; kullanabilirsiniz. JSFiddle ifadesinin here