h1 태그와 이미지 태그를 한 줄에 인접하게 정렬하는 방법은 무엇입니까?

Question

이미지와 h1 태그를 한 줄로 정렬하는 데 문제가 있습니다. 나는 전시를 시도했다 : 인라인과 인라인 블록 그들은 일하지 않았고 단지 2의 컨테이너를 만들었다. 섹션에 너비를 100 %로 추가 했는데도 아무 것도 입력하지 않았습니다. 부유물은 작동하지 않으며 그럴 경우 페이지의 정렬을 나사로 고정합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 여기 내 전체 소스 코드를 확인 : http://jsfiddle.net/TheAmazingKnight/bkmyv/

HTML

<section> 
    <img id="me" src="assets/img/pose1.jpg" alt="A photo of me." /> 
    <h1>FOLLOW ME ON...</h1> 
</section> 

CSS 이것은

section{ 
display:inline-block; 
width:100%; 
} 
h1{ 
font-weight:bold; 
font-size:40px; 
color:#FFFFFF; 
background-color:#FFB405; 
display:inline-block; 
} 

Answer 1

내가 #me에 float:left;을 추가

및 float:right;Fiddle

#me{ 
    width: 600px; 
    height: 400px; 
    display: block; 
    margin: 10px 10px; 
    float: left; 
} 
h1{ 
    display:inline-block; 
    font-weight:bold; 
    font-size:40px; 
    color:#FFFFFF; 
    background-color:#FFB405; 
    float: right; 
    margin: 10px; 
} 

Answer 2

때문에 기본적으로 블록 요소로 표시, 그래서 그들은 전체 라인을 점유로 이미지.

h1 요소와 마찬가지로 이미지를 display: inline-block;으로 변경하십시오. 여기

h1, img { 
    display: inline-block; 
} 

'바이올린 :

http://jsfiddle.net/ps2ms/

Answer 3

그냥 섹션 부동의 IMG을 제공 h1로는 : 떠났다.