窗口最小化時，爲什麼DIV放錯了位置？

Question

當窗口最小化時，一切都保持不變，但不是導航。

的下面圖像是當窗口最大化，並且當最小化窗口上方的圖像。

HTML：

<header> 
    <div class="header"> 
     <div class="logo"> 
      <img src="images/logo.png" /> 
     </div> 

     <nav> 
      <div class="navigation"> 

       <a href="home.html"> 
        <div class="box" style="background: rgba(0, 0, 0, 0.4)"> 
         <img src="images/home.png"> 
        <div class="name" style="background: rgba(0, 0, 0, 0.4)">HOME</div> 
        </div> 
       </a> 

       <div class="box"> 
        <img src="images/aboutus.png"> 
        <div class="name">ABOUT US</div> 
       </div> 
       <div class="box"> 
        <img src="images/groupcompanies.png"> 
        <div class="name">GROUP OF COMPANIES</div> 
       </div> 
       <div class="box"> 
        <img src="images/career.png"> 
        <div class="name">CAREER</div> 
       </div> 
       <div class="box"> 
        <img src="images/contactus.png"> 
        <div class="name">CONTACT US</div> 
       </div> 

      </div> 
     </nav> 
    </div>  

</header> 

CSS：

body { 
    background-image:url(images/pattern.png); 
    min-width: 775px; 
    overflow:auto; 
} 

@font-face { 
    font-family:"myfont"; 
    src:url(font/PTN57F.woff); 
} 
.header { 
    max-width:1200px; 
    min-width:200px; 
    height:170px; 
    margin:0 auto; 
    margin-top:10px; 
    background-color:rgba(0, 0, 0, 0.5); 
    border-radius:3px; 

} 

.logo { 
    width:230px; 
} 

.logo img { 
    margin-left:20px; 
    margin-top:31px; 
    border-right:solid #FFF 1px; 
    padding-right:33px; 
    height:auto; 
    width:auto; 
    float:left; 
} 


.navigation { 
    width:800px; 
    height:100px; 
    margin-left:256px; 
    float:none; 

} 

.box { 
    height:100px; 
    width:150px; 
    margin-right:5px; 
    float:left; 
    background: rgba(0, 0, 0, 0.2); 
    -webkit-transition: background 1s; 
    -o-transition: background 1s; 
    -moz-transition: background 1s; 
    border-radius:2px; 
    margin-top:31px; 

} 

.box:hover { 
    background: rgba(0, 0, 0, 0.4); 
    -webkit-transition: background 1s; 
    -o-transition: background 1s; 
    -moz-transition: background 1s; 
} 
.name { 
    height:23px; 
    width:auto; 
    text-align:center; 
    font-family:myfont; 
    font-size:14px; 
    color:#FFF; 
    text-decoration:none; 
} 

.box img { 

    float:none; 
    margin-left:38px; 
    margin-top:3px; 
} 

Answer 1

收件箱的內部div.navigation，其中有256px左邊距。當div.header調整大小時，左邊距保持不變。如果你想在裏面header中心的navigation可以使用

.navigation { 
    margin-left: auto; 
    margin-right: auto; 
} 

這樣，它不會溢出頭格，並根據總寬度調整左邊距。

由於您的評論的，如果你想header保持不變，你必須給它一個固定的寬度，像

.header { 
    width: 1200px; 
} 

然後，你也不需要min-width和max-width。