정확한 위치에 DIV 위치시키기

저는 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

이 가이와 CSS와 .navigation가 여기 IMG이다 .logo 아래 교체 float:left; 수 수직으로 각각

또는를 얼마나 높이에 따라 라인을 만들려면 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; 

}

장소 플로트 : 왼쪽; 내 .logo img {...} 클래스
장소 여백 - 상단 : 31px; in 내 . 네비게이션 {...} 클래스

출처

2013-07-22 12:03:49

변경 .navigation의 position:fixed;position:inline-block에; 및 margin-top를 추가하면 둘 다

출처

2013-07-22 12:02:13

정확한 위치에 DIV 위치시키기

답변

관련 문제