CSS来停止图像下方的文字环绕
我有以下标记：
<li id="CN2787"> <img class="fav_star" src="images/fav.png"> <span>Text, text and more text</span> </li> 我想这样做，如果文字换行，它不会进入图像的“列”。 我知道我可以用table （我正在做的）做到这一点，但是由于这个原因，这是不可行的。
我已经尝试了以下没有成功：
li span {width: 100px; margin-left: 20px} .fav_star {width: 20px}
我也尝试了float: right 。
谢谢。
编辑：我想它看起来像这样：
IMG Text starts here and keeps going... and wrap starts here.
不是这样的：
IMG Text starts here and keeps going... and wrap starts in the space left for the image.
由于这个问题获得了很多的意见，这是被接受的答案，我觉得有必要添加以下免责声明：
这个答案是针对OP的问题（具有示例中设置的宽度）。 虽然它的作品，它需要你在每个元素，图像和段落宽度。 除非这是您的要求，否则我build议使用Joe Conlin的解决scheme作为对此问题的另一个答案。
span元素是一个内联元素，你不能在CSS中改变它的宽度。
您可以将以下CSS添加到您的跨度，以便您可以更改其宽度。
display: block;
另一种通常更有意义的方法是使用<p>元素作为<span>的父项。
<li id="CN2787"> <img class="fav_star" src="images/fav.png"> <p> <span>Text, text and more text</span> </p> </li>
由于<p>是block元素，因此可以使用CSS设置其宽度，而不必更改任何内容。
但是在这两种情况下，因为现在你有一个块元素，所以你需要浮动图像，这样你的文本就不会全部走到图像的下面。
li p{width: 100px; margin-left: 20px} .fav_star {width: 20px;float:left}
PS而不是float:left在图像上，你也可以把float:right放在li p但是在这种情况下，你还需要text-align:left来正确地重新排列文本。
PSS如果您继续使用不添加<p>元素的第一个解决scheme，那么您的CSS应如下所示：
li span{width: 100px; margin-left: 20px;display:block} .fav_star {width: 20px;float:left}
对于这个问题很简单的答案似乎赶上了很多人：
<img src="url-to-image"> <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p> img { float: left; } p { overflow: hidden; }
看例子： http : //jsfiddle.net/vandigroup/upKGe/132/
对于那些想要一些背景信息的人来说，这里有一个简短的文章解释为什么overflow: hidden作品 它与所谓的块格式化上下文有关 。 这是W3C规范的一部分（即不是破解），基本上是由块typesstream的元素占据的区域。
每次应用时， overflow: hidden都会创build一个新的块格式上下文。 但它不是唯一能触发这种行为的财产。 Sydney Web Apps Group的菲奥娜·陈（Fiona Chan）
- 浮动：左/右
- 溢出：隐藏/自动/滚动
- 显示：表格单元格和任何与表格相关的值/行内块
- 位置：绝对/固定
如果你想让margin-left在span元素上工作，你需要display: inline-block或者display:block 。
在图像和范围周围包裹div，并将以下内容添加到CSS中，如下所示：
HTML
<li id="CN2787"> <div><img class="fav_star" src="images/fav.png"></div> <div><span>Text, text and more text</span></div> </li>
CSS
#CN2787 > div { display: inline-block; vertical-align: top; } #CN2787 > div:first-of-type { width: 35%; } #CN2787 > div:last-of-type { width: 65%; }
减
#CN2787 { > div { display: inline-block; vertical-align: top; } > div:first-of-type { width: 35%; } > div:last-of-type { width: 65%; } }
设置display:flex为我工作的文本。
