상위 div에서 텍스트를 올바르게 정렬하는 방법은 무엇입니까?

Question

DEMO LINK

위의 데모에서 알 수 있듯이이 팁을 사용하거나 알고 계셨습니까?

두 번째 줄로 가면 위의 줄과 같은 줄에서 시작하므로 전구 이미지 아래로 이동하지 않으며 항상 모든 줄에 동일하게 정렬되도록 텍스트를 표시하고 싶습니다. 또한 TIP이 맨 위에 있고 텍스트가 아래에 있도록하고 싶습니다.

어떻게이 코드를 사용하여이 작업을 수행 할 수 있습니까?

Answer 1

이미지를 배경으로 배치하고 패딩 왼쪽을 사용하여 이미지와 텍스트를 정렬합니다. 팁 아래에 텍스트를 배치 할 <br />를 사용

HTML :

<div class="tip"> 
    <span><b>Tip:</b></span><br /><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum is simply dummy text of the printing and typesetting industry.</span> 
</div> 

CSS :

.tip { 
    background: #f5f2f2 url('http://s30.postimg.org/ayzw4b465/tip.png') no-repeat left; 
    padding: 5px 5px 5px 40px; 
    border-left:5px solid #33302c; 
    margin-bottom: 20px; 
} 
.tip span { 
font-size: 16px; 
} 

예 : http://jsfiddle.net/dwrDS/

Answer 2

또는 당신은 그것을 사용하고자하는 경우 그냥 CSS를 변경하십시오

이 사용 는 CSS

.tip img { 
    float: left; padding-right: 10px; 
} 
.tip span { 
    font-size: 16px; 
} 

Answer 3

단지 변경 CSS

.tip img { 
     float: left; 
    }