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

Posted 2023-03-06

【中文标题】CSS：图像和文本在一行右侧，没有流文本？

【英文标题】：CSS: Image and text to the right on one line, no flow text?

【发布时间】：2012-12-05 20:07:13

【问题描述】：

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

例子：

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

有什么帮助吗？

谢谢！

【参考方案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>

【讨论】：

哪个宽度？容器？它仍然可以工作，但容器将拉伸到其父级的宽度。您可以通过将容器设置为 display:inline-block

来避免这种情况

【参考方案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 的最后一行是关键：“left-img 类后面的<p> 需要返回到正常的文档流。”

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

【讨论】：

假装 是 ：答案已更新。请参阅“工作代码将...”

CSS 的第一行也需要将“span”替换为“img”。即：.left-img img ... 而不是 .left-img span ...