2016-08-14 2 views
0

나는 3 개 이미지를 가지고 있고,이처럼 그들을 보여주고 싶은 :이 div의 하단에 이미지를 정렬하는 방법은 무엇입니까?

AABB 
AABB 
AACC 
AACC 

A, B, C는 이미지입니다.

<div class="logo-wrap"> 

    <div class="site-title" style="position: relative; " > 
     <a href="@Url.Action("Index", "Home")"> 
     <img src="~/Images/girl.png" /> 
     </a> 
    </div> 
    <div class="site-sub-header"> 
     <img src="~/Images/logo.png" style="height:75%;" /> 
     <br/> 
     <img src="~/Images/icons.png" style="height:75%; " /> 
    </div>     

</div> 

을 기반으로 : A의 높이가 B와 C의 높이의 합계가 아닙니다, 그래서 여기

C.

의 하단에 정렬에 보여주고 싶은 때문에 내가 지금 사용하고 코드입니다 How do I position an image at the bottom of div?, 나는
position: relative; 

다음

position: absolute; 
left: 0; 
bottom: 0; 

에 girl.png 이미지를 설정

에 로고 랩을 설정하지 그러나 어떤 작업을 수행 일하지 마라. 누구든지 제안이 있습니까?

감사

+1

을위한 훌륭한 솔루션입니다 같아요. – Abhi

+0

달성하고자하는 목표입니까? [** DEMO **] (https://jsfiddle.net/rickyruizm/gvsL12yr/) – Ricky

답변

0

사용 display:inline-block 예를 들어 행을 구성하는 "AABB" 을 나는 position:absolute 당신이 바이올린을하시기 바랍니다 만들 수이

관련 문제