響應文字環繞圖像

Question

我需要文字環繞圖像（200px乘200px），直到一側的包裹文字的一部分變得太窄，此時我希望文字框進入圖像下方。

這就是我的意思是：

when the screen is wide

when the screen is more narrow
這就是我想要的包裹停止。我不想文本的方式來包裝它顯示文本的瘦棧是這樣的：

的Lorem
存有
是
只是
虛擬
文本
的
打印
的 和blah blah Lorem Ipsum簡直就是虛擬文本的印刷和

請幫我:(

Answer 1

article { 
 
    margin: 20px; 
 
    font-family: verdana, sans serif; 
 
    font-size: 16px; 
 
} 
 
p { 
 
    margin-top: 20px; 
 
} 
 
.example-container { 
 
    clear: both; 
 
    margin-top: 40px; 
 
} 
 
.caption { 
 
    font-style: italic; 
 
    color: BlueViolet; 
 
    margin-top: 40px; 
 
} 
 
.caption-subhead { 
 
    font-style: normal; 
 
    font-weight: bold; 
 
} 
 
.image-example { 
 
    float: left; 
 
    background-color: #555555; 
 
    width: 300px; 
 
    height: 80px; 
 
    text-align:center; 
 
    color: #FFFFFF; 
 
    padding-top: 60px; 
 
    margin: 5px 20px 10px 0; 
 
} 
 
.hyphenate { 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
}

<article lang="en"> 
 
    
 

 
<div class="example-container"> 
 
    
 
    <div class="image-example">Image Example</div> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
 
</div> 
 

 
    
 
</article>