html – 包裹图像时的CSS段落最小宽度

概述考虑以下CSS / HTML： img.text-wrap-left { float:left; } <p> <img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOv 考虑以下CSS / HTML：

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

<p>  <img  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>

调整视口大小时,文本将在图像的右侧包裹,但也会变得非常窄,甚至只有几个字母.

是否可以在段落完全位于图像之前指定文本的最小宽度,所有这些都不会牺牲填充和边距？

在这个例子中,一个简单的解决方案是添加媒体CSS条件,并告诉图像显示：block;在一定的宽度.问题是这只是一个例子;我的问题是与文本一起使用的图像可能具有可变宽度(即它们是用户定义的),我正在寻找响应式解决方案.

有任何想法吗？

解决方法 我认为更好的选择是使用图像上的最大宽度来保持其最大宽度为某个％,然后还添加媒体查询以在某些时候将文本分解为新行. 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  src="//lh3.Googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" wIDth="550">  Lorem ipsum dolor sit amet,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>

总结

以上是内存溢出为你收集整理的html – 包裹图像时的CSS段落最小宽度全部内容，希望文章能够帮你解决html – 包裹图像时的CSS段落最小宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。