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>
여기에서는 어떻게 하는지..알려주세요.
div영역에서 bottom 정렬
-
- 해커
- Posts: 691
- Joined: 2004 08 11 22:14 59
- Contact:
Re: div영역에서 bottom 정렬
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 정렬
img의 style에 position: absolute;도 추가해주세요.hyeonseok wrote:Code: Select all
<img src="http://wstatic.naver.com/w5/nxt2.gif" width="44" height="10" style="bottom: 0;" alt="더보기"></a> </div>
전체 페이지를 위한 레이아웃
------ 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 부분에 높이에 따라 좌측 서브메뉴의 높이도 변경되며 아래쪽에 붙이고 싶은 이미지도 스크롤바에 따라 제일 하단으로 위치합니다. 실제로 이미지를 넣고 확인해보세요 ^^
<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 부분에 높이에 따라 좌측 서브메뉴의 높이도 변경되며 아래쪽에 붙이고 싶은 이미지도 스크롤바에 따라 제일 하단으로 위치합니다. 실제로 이미지를 넣고 확인해보세요 ^^
Who is online
Users browsing this forum: Ahrefs [Bot] and 2 guests