將DIV定位在正確的位置

2013-07-22 109 views 0 likes

我是CSS新手，最近一直在嘗試將DIV放置在我希望的位置，但一些屬性（如float和margin）使我困惑不已。在下面的圖片中，我試圖將白色div放在徽標的右側。將DIV定位在正確的位置

由於我還無法向張貼圖片的帖子，我上傳here

HTML：

<body> 

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

     <nav> 
      <div class="navigation"> 

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

</header> 

</body>

CSS：

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

} 


.navigation { 
    width:500px; 
    height:100px; 
    margin-left:200px; 
    background-color:#FFF; 
    position:fixed; 


}

來源

2013-07-22 Farhan Afzal

回答

更換下面.logo IMG和的.navigation與此你的CSS，這裏是所述fiddle

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


.navigation { 
    width:500px; 
    height:100px; 
    margin-left:200px; 
    margin-top:31px; 
    background-color:#FFF; 
    position:fixed; 

}