Question

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

示例：

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。

我的图片和文字

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

我不希望图像后面的文字在它周围流动。我试过浮动：左边是图像，左边对齐，但我不知道怎么说只有一些文字在旁边。

任何帮助？

谢谢！

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

Answer 2

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/

CSS：图像和文本在一行右侧，没有流文本？

2 个答案: