CSS 텍스트 줄 바꿈 아래 이미지

Question

브라우저 창 크기가 작아지면 텍스트가 내 이미지 아래에 표시되지 않도록 도움이 필요합니다.

HTML :

<div class='article'> 
    <img src='images/fakeSlider.png' /> 
    <h2>Example</h2> 
    <p>This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.</p> 
</div> 

CSS :

.article { 
    min-width: 70%; 
    max-width: 100%; 
} 

.article h2 { 
    float: left; 
    font-family: Cabin Bold; 
    font-size: 22px; 
    padding: 5px; 
    margin: 5px 10px auto; 
} 

.article p { 
    float: left; 
    font-family: Cabin; 
    font-size: 18px; 
    padding: 5px; 
    margin: 5px 10px auto; 
    min-width: 50%; 
    max-width: 70%; 
    display: block; 
} 

.article img { 
    min-width: 20%; 
    max-width: 40%; 
    float: left; 
    height: 120px; 
    padding: 5px; 
    margin: 5px 10px auto; 
} 

그래서; 분명히 ... 제목이 이미지의 오른쪽 상단에 있고 텍스트가 헤더 아래에있는 동안 이미지가 왼쪽에 있기를 원합니다. 브라우저 창 크기가 작아지고 텍스트가 이미지 아래로 나올 때까지는 괜찮습니다. 나는 바보가되어서 무엇이 잘못되었는지를 볼 수는 없지만 몇 가지 시도를 해봤지만 여전히 제대로 작동하지 않는지 확신 할 수 없습니다.

도움을 주시면 감사하겠습니다. 감사합니다. .

Answer 1

사용없는 랩 :

.article p 
{ 
    white-space:nowrap; 
} 

내가 위에 나열된 코드 테스트는 완벽하게 작동합니다. 도움이 되었다면 답을 표시하십시오.