여러 h 태그로 나누기 div

Question

다음 html 코드가 있습니다. 그것은 div 안에 하나의 H 태그를 사용할 때 작동합니다. 한 div에 다른 H 태그를 삽입하는 순간 해당 div는 나머지 코드를 끊는 것 같습니다. 인라인 블록을 사용하므로 div가 올바르게 정렬됩니다. 여분의 H 태그가있는 div는 다른 두 div를 푸시 다운하고 정렬이 사라졌습니다.

참고 : 모든 여백은 0으로 설정되어 있으므로 문제가되지 않습니다. 또한 H 태그를 인라인 요소로 설정해도 도움이되지 않았습니다.

도움을 주시면 감사하겠습니다. 미리 감사드립니다.

#content-2 { 
    width:980px; 
    margin:0 auto; 
    } 
    #content-2 div { 
    display:inline-block; 
    height:400px; 
    width:33%; 
    } 


    <div id="content-2"> 

    <div> 
    <h3>Bla</h3> 
    <h3>Bla</h3> 
    </div> 

    <div> 
    <h3>Bla</h3> 
    </div> 

    <div> 
    <h3>Bla</h3> 
    </div> 

    </div> 

Answer 1

을하고

Answer 2

음, 다른 div가 아래로 밀리는 원인이 확실하지 않습니다. <h3>이 아니라 <p> 또는 <span>의 경우에도 발생하므로 머리글이 아닙니다.

<div>의 내부에 #content-2float:left이 문제를 해결하는 것처럼 보입니까? 그게 효과가 있습니까? 다음 inline block

Answer 3

사용 float:left는 div의 플로트 또는 vertical-align: top;