1

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

例子：

一些文字... 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 ，它将它与左侧对齐，但我不知道如何说它旁边只有一些文本。

有什么帮助吗？

谢谢！

4

2 回答 2

1

这是一种方法：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>
于 2012-12-18T15:26:03.590 回答
1

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; }
​

HTML

<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的最后一行是关键：“<p>下面的一个left-img类需要恢复正常的文档流。”

小提琴：http: //jsfiddle.net/MP8GJ/1/

于 2012-12-18T15:40:56.543 回答