부모님이 부모님 위에 머무르도록하십시오

Question

첫눈에 보이지 않는 "문제"가 있습니다. 그래서 하위 항목을 포함하는 상위 div가 있습니다. 한 어린이는 텍스트를 포함하고 다른 어린이는 그림을 포함 할 것이다. 둘 다 인라인 블록 요소이며 (서로 나란히 배치해야 함) 너비를 설정해야합니다. 이제 그림 div가 텍스트 div보다 크면 부모는 해당 div (가장 큰 div)의 높이를 상속합니다. 그러나 두 번째 자식 (더 작음)은 div의 맨 아래에 배치됩니다. 내가 원하는 건 그 div를 항상 맨 위에 두는 것입니다.

나는

top: 0px; 

물건

을 시도했지만, 그것은 작동하지 않습니다. 그냥 바닥에 붙어 있습니다.

은 여기 내 샘플 (HTML) 코드입니다 :

<div id="parent"> 
    <div id="child1"> Assassin's Creed IV: Black Flag: Gameplay Reveal Trailer - Chart your course through a treacherous and unpredictable world as the Assassin's Creed series hits the high seas in Assassin's Creed IV: Black Flag. <a href="http://bit.ly/Zny5pI">http://bit.ly/Zny5pI</a> </div> 
    <div id="child2"> <img width="300px" src="http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/536527_10151407411789285_1500143344_n.jpg" /> </div> 
</div> 

그리고 여기에 CSS의 :

#parent { 
    border: 2px solid green; 
} 

#child1 { 
    border: 2px solid black; 
    display: inline-block; 
    width: 400px; 
    margin: 2px; 
    top: 0px; 
} 

#child2 { 
    border: 2px solid red; 
    display: inline-block; 
    width: 300px; 
} 

난 그냥 예를 들어 게임 트레일러 스에 의해 페이스 북에 게시물을했다.

누구든지이 "문제"를 해결함으로써 도움을 줄 수 있습니까? 나는 어렵다고 생각하지 않지만, CSS로 작업 한 이후로 꽤 오래되었습니다. P

미리 감사드립니다.

Answer 1

보다는 display: inline는 float: left 시도.

Answer 2

#parent > div {vertical-align: top} 

Answer 3

시도 CSS 규칙을 추가 : 당신은 상단 정렬

을

행운을 원하는 모든 인라인 블록 된 div에

vertical-align:top; 

!

Answer 4

이렇게하는 데는 몇 가지 방법이 있지만 모두 작동해야합니다.

1

#parent > div{ 
    vertical-align: top; 
} 

2

#parent{ 
    position: relative; 
} 
#parent > div{ 
    position: absolute; 
    top: 0px; 
} 

3 :

#parent > div{ 
    float: left; 
} 

Answer 5

대개 절대 위치 지정으로 문제를 해결할 수 있지만 일반적으로 문제가 발생하여 상대 위치 지정을 시도합니다.

http://jsfiddle.net/C6n86/

#parent { 
    border: 2px solid green; 
    width: 504px; 
    margin: 0px; 
    padding: 0px; 
    position: relative; 
    float: left; 
} 

#child1 { 
    position: absolute; 
    top: 0px; 
    float: left; 
    height: 279px; 
    color: white; 
} 

#child2 { 
    position: absolute; 
    top: 0px; 
    float:left; 
}