环绕图像时CSS段落的最小宽度

Yanick Rochon 发表于 Dev

亚尼克·罗雄（Yanick Rochon）

考虑以下CSS / HTML：

img.text-wrap-left {
  float:left;  
}

<p>
  <img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam.

Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit.
</p>

调整视口大小时，文本将环绕图像的右边，但也会变得非常狭窄，以至于甚至只有几个字母。

是否可以在段落完全位于图像下方之前指定文本的最小宽度，而无需牺牲填充和边距？

在此示例中，一个简单的解决方案是添加mediaCSS条件，并告知图像display:block;一定的宽度。问题在于，这仅是示例。我的问题是，与文本一起使用的图像可能具有可变的宽度（即，它们是用户定义的），我正在寻找一种自适应的解决方案。

有任何想法吗？

内纳德·弗拉卡（Nenad Vracar）

我认为更好的选择是max-width在图像上使用以将其最大宽度保持在某个百分比，然后再添加媒体查询以在某些时候将文本中断到新行。Fiddle

img.text-wrap-left {
  float:left; 
  max-width: 50%;
}
@media(max-width: 480px) {
  img.text-wrap-left {
    display: block;
    float: none;
    max-width: 100%;
  }
}

<p>
  <img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam.

Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit.
</p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。