CSS 정렬 문제

Question

이 이미지를보세요 :

http://i.gyazo.com/a5bf5097e6783d4879f12fdba0b2bbec.png

내가 "테스트"프로필 아래를 싶어하는 BR HTML 태그는 위의 결과를 생산하고 나는 것을 원하지 않는다 . 이것에 대한

Heres는 내 코드 : http://pastebin.com/raw.php?i=hW3jDrLu

<i class="fa fa-user fa-3x" style="vertical-align:middle;"></i> 
<span style="font-size: 12pt;">Profile <span style="color: #979797;font-size:8pt;">Test</span></span> 

내가 바로 프로필 헤더 그것은 코드의 자세한 내용을 보지 않고 말을 힘든

Answer 1

이하로 "테스트"를 좋아하지만 것 최선의 방법은 img을 하나의 div에 넣고 다른 하나는 텍스트를 넣는 것입니다. 그런 다음 div 안에 텍스트 줄 바꿈을 사용할 수 있으며 img 오른쪽에 div이 여전히 있습니다.

Here은 어떻게 작동해야하는지 모의 테스트입니다.

분명히 나뿐만 아니라 여기에 바이올린 코드를 추가해야합니다 :

HTML :

<div class="imgC"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42"> </img></div> 
<div class="textC"><span style="font-size: 12pt;">Profile <br></span><span style="color: #979797;font-size:8pt;">Test</span></div> 

CSS : 또한 그들을 떠하여 블록 속성을 보존 할 수 있습니다

.imgC{ 
    display:inline-block; 
    float:left; 
} 

.textC{ 
    display:inline-block; 
    float:left;  
} 

Answer 2

clear 속성 (fiddle here)을 사용하는 경우 :

HTML :

<div id="Container"> 
    <img id="Icon" src="http://goo.gl/OJhO2s"/> 
    <div id="InfoContainer"> 
     <span class="profile">Profile</span> 
     <span class="test">Test</span> 
    </div> 
</div> 

CSS :

#Icon { 
    width: 64px; 
    height: 64px; 
    float: left; 
} 

#InfoContainer { 
    float: left; 
} 

#InfoContainer span { 
    display: block; 
    clear: both; 
} 

.profile { 
    font-size: medium; 
} 

.test { 
    font-size: small; 
    color: #444; 
}