CSS span floating

Question

다음 HTML에서 동일한 행에 span과 h2를 표시하고 둘 다 왼쪽으로 떠야합니다. 스팬은 적은 텍스트를 가지고 있지만, 그것은 다음 라인으로 계속해야하므로 H2는 더 가지고 있지만, 내가 뭔가 잘못하고있는 중이 야 것 같습니다 :

HTML :

<div> 
    <span>hello</span> 
    <h2>This should start after the span, and continue to next line.</h2> 
</div> 

CSS :를

div{ 
    border: 1px solid red; 
    width: 150px; 
    overflow: hidden; 
} 

span{ 
    display: inline-block; 
    float: left; 
    border:1px solid green; 
} 

h2{ 
    display: inline-block; 
    float: left; 
} 

데모 : http://jsfiddle.net/ZnSBJ/

Answer 1

h2에서 float:left를 제거하고 다음 너비를 지정 H2 상자처럼 행동하려면 inline-block to inline

h2{ 
    display: inline; 
} 

DEMO

---

을 변경

h2{ 
    display: inline-block; width:100px 
} 

DEMO 2