div 하단 정렬 방법

layout of my page
이미지 하단에 div id="navigation"을 끼워 넣을 수 없습니다. 누구든지 CSS를 도와 줄 수 있습니까? 감사!div 하단 정렬 방법

<body> 
    <div class="container"> 
    <div class="header"><img id="logo" src="images/logo.png" /> 
     <div id="navigation"> 
     <ul> 
      <li><a href="#">Menu link 1</a></li> 
     <li><a href="#">Menu link 2</a></li> 
      <li><a href="#">Menu link 3</a></li> 
     </ul> 
     </div> 
    </div> 
    <div class="sidebar">Sidebar</div> 
    <div class="content">Main content</div> 
    <div class="footer">Footer content</div> 
    </div> 
</body>

그리고 CSS :

.container { 
width: 80%; 
max-width: 1260px; 
min-width: 780px; 
background: yellow; 
margin: 0 auto; 
} 

.header { 
width: 100%; 
float: left; 
background: orange; 
} 

#logo { 
float: left; 
display: block; 
} 

#navigation { 
margin-left: 50px; 
padding: 0px 50px 0px 0px; 
float: left; 
background: pink; 
} 

#navigation ul { 
list-style-type: none; 
} 

#navigation li { 
display: inline; 
} 

#navigation a { 
float: left; 
margin: 0px 80px 0px 0px; 
} 

.sidebar { 
clear: both; 
float: left; 
width: 20%; 
background: red; 
} 

.content { 
float: left; 
width: 80%; 
} 

.footer { 
clear: both; 
position: relative; 
background: green; 
}

출처

2012-04-14 Boris

또는 내비게이션을으로 설정하려면 헤더의 높이와 머리글 위치를 상대적으로 설정할 수 있습니다.

.container { 
width: 80%; 
max-width: 1260px; 
min-width: 780px; 
background: yellow; 
margin: 0 auto; 
height: 150px; 
} 

.header { 
width: 100%; 
float: left; 
background: orange; 
    position: relative; 
} 

#logo { 
float: left; 
display: block; 
} 

#navigation { 
margin-left: 50px; 
padding: 0px 50px 0px 0px; 
float: left; 
background: pink; 
    position:absolute; 
    bottom:0px; 
} 

#navigation ul { 
list-style-type: none; 
} 

#navigation li { 
display: inline; 
} 

#navigation a { 
float: left; 
margin: 0px 80px 0px 0px; 
} 

.sidebar { 
clear: both; 
float: left; 
width: 20%; 
background: red; 
} 

.content { 
float: left; 
width: 80%; 
} 

.footer { 
clear: both; 
position: relative; 
background: green; 
}

출처

2012-04-14 19:34:17 Tino

답장을 보내 주셔서 감사합니다. '.container'에서 높이를 설정하지 않고 비슷한 접근법을 사용할 수 있습니까? CSS에서 하드 코딩 된 값을 피하기 위해 노력하고 있는데 (로고 이미지가 변경된 경우) – Boris

당신과 같이, 찾고있는 수준 아래로 밀어 탐색에 약간의 마진을 추가 여기

는 HTML 코드입니다 :

#navigation { 
    margin-top:45px; /* adjust as needed */ 
}

출처

2012-04-14 19:31:31

답장을 보내 주셔서 감사합니다. 위쪽 여백 값을 하드 코딩하지 않고 동일한 결과를 얻을 수있는 방법이 있습니까? 로고 이미지가 바뀌면 CSS 코드를 변경해야합니다 ... – Boris

@ 보리스 가능하지만 icky position : absolute'을 사용하는 것이지만 다른 방법은'vertical-align : bottom' 속성을 사용하는 것입니다 그러나 헤더에 높이를 설정해야합니다. –

div 하단 정렬 방법

답변

관련 문제