CSS:图像和文本在一行的右边，没有流文本？

Question

我想在图像右侧显示带有文本的图像。这应该都在一行中，并且在更多文本中。我不希望其余文本围绕图像流动。

例子:

一些文本...... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua。

我的图片和我的文字

更多文本... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua。

我不希望图像后面的文字环绕它。我为图像尝试了 float:left，它将它与左侧对齐，但我不知道如何说它旁边只有一些文本。

有什么帮助吗？

谢谢!

Answer 1

这是一种方法:http://jsfiddle.net/2BJ7J/

基本上，您是使用容器将图像和文本 float 到左侧。

.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>