Question

我需要文本环绕图像（200px×200px），直到侧面包装文本的一部分变得太窄，此时我希望文本框位于图像下方。

这就是我的意思：

when the screen is more narrow
这是我希望包装停止的地方。我不希望文本以一种方式包装，它显示如下的文本：＃/ p>

Lorem
Ipsum
是简单地虚拟
文字
的印刷
和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>

响应文字环绕图像

1 个答案: