컨테이너 맨 아래에 요소를 설정하는 방법

Question

안녕하세요 나는 정렬되지 않은 lists.I의 번호가있는 컨테이너를 가지고 있습니다 마지막으로 정렬되지 않은 목록을 0 ​​마진을 bottom.Here 설정하려면 원하는 내 코드 및 tryed

<ul id="updates"> 
       <li>Follow Zack's updates<br/>300 followers. Follows:</li> 
       <li><a href="#"><img src="img/zack/update1.png" alt="update"/></a></li> 
       <li><a href="#"><img src="img/zack/update2.png" alt="update"/></a></li> 
       <li><a href="#"><img src="img/zack/update3.png" alt="update"/></a></li> 
       <li><a href="#"><img src="img/zack/update4.png" alt="update"/></a></li> 
       <li>+ <br/> 10</li> 
      </ul> 


<p> Site powered by zi<span>kio<span></p> 
div#articles p{ 
    margin-top: auto; 
    margin-bottom: 0 
} 
ul#updates{ 
    margin-top: auto; 
    margin-bottom: 0; 
} 

두 페이지 및 UL 번호 업데이트 0

* 편집 여백 하단에 설정해야합니다 : 및 작동하지 않습니다 부모가 이미 위치로 설정 * : 고정 상대 위치 지정은 옵션이 아닙니다.

Answer 1

에 position:absolute; bottom:0;를 추가 "를 포함하는"당신이있어에 position:relative를 추가 목록을 제로 여백과 패딩으로 재설정 한 다음 목록 자체가 아닌 목록의 CONTENTS 스타일을 지정하는 것이 가장 좋습니다. 목록 항목에 대한 다음

#updates, #updates li { 
    margin:0; 
    padding:0; 
} 

:

#updates a { 
    display:block; 
    padding: ___ <-- insert your values 
    margin: ___ 
} 

는 또한, 인라인 이미지보다는 UI 요소에 대한 CSS 배경을 사용하는 것이 좋습니다 형태입니다. 이미지 크기와 일치하도록 목록의 링크 크기를 설정하고 이미지를 CSS 배경으로 적용 할 수 있습니다.

#updates a { 
     display:block; 
     background-image:url(img/zack/update1.png); 
     height: ___ 
     width: ___ 
     padding: ___ 
     margin: ___ 
    } 

Answer 2

는 <div> 다음과 같은 목록을 사용하는 경우 div.article의 모든 어린이는 단지

div.article { 
    position: relative; /* after your edit: fixed is fine too */ 
    padding-bottom : /* enough to make room for last ul */ 
} 

div.article > ul:last-child { 
    position : absolute; 
    bottom : 0; 
} 

Answer 3

을 설정할 수 있습니다 목록을 가정하여 <ul> 및 <p> CSS를