div영역에서 bottom 정렬

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
Post Reply
company

div영역에서 bottom 정렬

Post by company »

div영역에서 이미지를 bottom 으로 하고 싶은데..어떻게 하는지??
테이블 에서는 valign="bottom" 으로 하면 되는데..


<div style="width:100px; height:100px; border:1px solid;">
<a href="#"><img src="http://wstatic.naver.com/w5/nxt2.gif" width="44" height="10" alt="더보기"></a>
</div>


여기에서는 어떻게 하는지..알려주세요.
hyeonseok
해커
해커
Posts: 691
Joined: 2004 08 11 22:14 59
Contact:

Re: div영역에서 bottom 정렬

Post by hyeonseok »

Code: Select all

<div style="width:100px; height:100px; border:1px solid; position: relative;">
	<a href="#"><img src="http://wstatic.naver.com/w5/nxt2.gif" width="44" height="10" style="bottom: 0;" alt="더보기"></a>
</div>
을 시도해 보세요.
흐음

Re: div영역에서 bottom 정렬

Post by 흐음 »

hyeonseok wrote:

Code: Select all

<img src="http://wstatic.naver.com/w5/nxt2.gif" width="44" height="10" style="bottom: 0;" alt="더보기"></a>
</div>
img의 style에 position: absolute;도 추가해주세요.
연봉3000을꿈꾼다

전체 페이지를 위한 레이아웃

Post by 연봉3000을꿈꾼다 »

------ HTML -------
<div id="wrap">
<div id="mainmenu"><h1>메인메뉴</h1></div>
<div id="submenu"><h1>서브메뉴</h1></div>
<div id="content">컨텐츠</div>
</div>

----- CSS ---------
/* wrap */
#wrap {
width: 750px;
height: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 2px solid #9DB9BE;
background: url(../img/이미지.gif) bottom left no-repeat #FFF;/*이미지*/
}

/* main menu */
#mainmenu {
width: 100%;
height: 80px;
border-top: 3px solid #9DB9BE;
border-bottom: 1px solid #9DB9BE;
}

/* sub menu */
#submenu {
float: left;
width: 163px;
}

/* content */
#content {
margin-left: 165px;
width: 555px;
height: 800px;/*높이를 변경해서 확인해보세요*/
padding: 20px 10px 20px 15px;
border-left: 1px solid #9DB9BE;
background: #FFF;
}

-------------------------------------

위의소스대로 넣어서 확인해보세요 content 부분에 높이에 따라 좌측 서브메뉴의 높이도 변경되며 아래쪽에 붙이고 싶은 이미지도 스크롤바에 따라 제일 하단으로 위치합니다. 실제로 이미지를 넣고 확인해보세요 ^^
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 2 guests