HTML CSS IMAGE - 위치 지정

맨 위에 정보가있는 큰 DIV가 있습니다. 나는 또한 이미지가 있고 맨 아래에 이미지를 놓고 싶습니다. 큰 여백을 사용하여 푸시 다운 할 수 있지만 더 좋은 방법이 있어야합니다. 코드의 일부 :HTML CSS IMAGE - 위치 지정

이미지 : 어떻게 DIV의 맨 아래에 앉아 이미지를 얻을 수 있습니다

<div id="containerBody"> 
    <div id="facebookTwitter"> 
    <img src="images/site/common/social-media-twitter-seemeagain-dating2.png"/> 
    </div> 
</div

이미지 크기 1500

* 960의 주위에 크기 100 * 300의 주위와 DIV ? DIV에 이미있는 텍스트와 이미지는 위치에 대해 왼쪽으로 부동을 사용하고 있습니다. 위쪽에 가까이 있습니다.

들으

출처

2011-09-12 Adam

왜 이미지의 위치와 상대 위치를 사용하지 않는 이유는 무엇입니까? 0 %; – George

한 가지 방법은 CSS에 absolute 위치 지정을 사용하여 이미지를 포함하는 div의 위치를 정확하게 위치 할 곳 (relative 위치 div)에 배치하는 것입니다. 이것은 중요한 측면입니다. 다른 점은 브라우저 창에 대해 absolute입니다.

그래서 같은 것을 : 나는 JSFiddle 여기에 당신을 위해 예를했다

div#containerBody { 
    width: 100%; 
    height: 500px; 
    background-image:url('images/site/common/social-media-twitter-seemeagain-dating2.png'); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
}

: 더 쉬운 해결책은 그냥이처럼 containerBody 사업부의 background CSS 속성을 사용하는 것입니다

div#containerBody { 
    position: relative; 
} 


div#facebookTwitter { 
    position: absolute; 
    bottom: 0px; 
    height: 35px; //should be your image height 
    width: 120px; //should be your image width 
}

출처

2011-09-12 10:26:52 Jules

이 CSS를보십시오 :

#facebookTwitter{ 
position:relative; 
} 


#facebookTwitter img{ 
position:absolute; 
bottom:0px; 
}

출처

2011-09-12 10:21:50

#facebookTwitter img{ 
     vertical-align:bottom; 
}

출처

2011-09-12 10:22:15

당신은 부동의 절대 위치를 대신 사용해야합니다.

여백을 주면 페이지가 높아져 이미지가 이미지의 아래쪽을 따라 가지 않으면 여백이 변경되지 않습니다.

Check this example.

출처

2011-09-12 10:25:30

HTML CSS IMAGE - 위치 지정

답변

관련 문제