我想在图像的右边显示一个带有文本的图像。这应该都在一行中，并且在更多文本中。我不希望其余的文本在图像周围流动。
示例：
Some Text ... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
我的图像和我的文字
Some more text ... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
我不希望图像后面的文字在它周围流动。我尝试了浮动：左图像，它将它对齐到左边，但是我不知道怎么说只有一些文本在它旁边。
有什么帮助吗？
谢谢！
这里有一个方法：http://jsfiddle.net/2BJ7J/
基本上，您使用容器将图像和文本浮动到左侧。
.container {
width:480px;
padding:20px;
border:1px solid #ccc;
overflow:auto;
}
.container img {
float:left;
width:260px;
margin:0 20px 0 0;
}
.container .text {
float:left;
width:200px;
}
<div class="container">
<img src="http://i.telegraph.co.uk/multimedia/archive/01452/fer1_1452403i.jpg" />
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis, lorem eget pulvinar faucibus, diam tortor dapibus sapien, a egestas massa arcu ac risus. Ut tempor condimentum tincidunt. Donec vehicula, dui ornare ornare mollis, arcu nibh interdum ipsum, eu condimentum enim nunc id enim
</div>
</div>
CSS
p { line-height:1.5; outline:1px dashed green }
.left-img span { /* span would be `img` in your project */
float:left;
margin-right:1em;
/* BEG not needed for image */
background-color:gray;
width:20px;
height:200px;
outline:1px dotted;
/* END not needed for image */
}
.left-img + p { clear:left; }
超文本标记语言
<p>Lorem ipsum ....</p>
<p class="left-img"><span></span>More text</p>
<!-- Replace <span></span> with <img>
---- working code would be:
---- <p class="left-img"><img src="...">More text</p>
-->
<p>Lorem ipsum ....</p>
查看标记的语义学并利用自然文档流。上面CSS的最后一行是关键：“The
小提琴：http://jsfiddle.net/MP8GJ/1/
