如何阻止文本在其左侧图像下方？答案

【问题标题】：How do I stop text going below the image to its left?如何阻止文本在其左侧图像下方？
【发布时间】：2013-05-27 07:38:20
【问题描述】：

好的，所以我在它的右边有一张图片和一些文字。

当文字足够多时，文字会开始在图片下方移动，并从那里继续，例如：

[ IMAGE ] text text text text 
[ HERE! ] text text text text 
text text text text text text 
text text text text text text

相反，我希望它看起来像这样：

[ IMAGE ] text text text text 
[ HERE! ] text text text text 
          text text text text 
          text text text text 
          text text text text

我该怎么做呢？我确定有一个简单的修复，可能与图像的显示属性、对齐属性或其他东西有关。

谢谢！

【问题讨论】：

因为没有损坏，所以没有什么需要修复的。刚刚工作的 CSS。

标签： html css image text alignment

【解决方案1】：

获得这种效果的一种简单方法，例如：

<div>
    <img src="http://www.placehold.it/100x100">
        <p>Lorem ipsum dolor sit amet...</p>
</div>

和 CSS：

div img {
    float: left;
    margin-right: 10px;
}
div p {
    overflow: auto;
}

小提琴演示：http://jsfiddle.net/audetwebdesign/8Rarq/

【讨论】：

完美！非常感谢。
不客气！请记住接受答案。万事如意！
如果图片下方有多个
标签怎么办？它们的工作方式似乎不一样jsfiddle.net/8Rarq/2
@AVeryDev 我会将
标签放在包装器 div 中，并将包装器 div 设置为溢出：auto 查看更新：jsfiddle.net/audetwebdesign/8Rarq/4 您可能需要调整嵌套元素的边距，具体取决于你需要什么。

【解决方案2】：

您的文本的容器将是一个简单的解决方案。选择您希望文本占用多少空间，并在您的 CSS 中创建一个带有隐藏边框的类。这是我使用的一个例子：

.text-box{
    float: left;
    background-color: #FFFFFF;
    border: 1px hidden;
    width: 300px;
    height: 300px; 
}

我希望这会有所帮助！

【讨论】：

我刚刚尝试了 Marc 的其他解决方案，效果很好，但也感谢您抽出时间提供帮助！这可能会帮助其他人。

【解决方案3】：

这取决于结构和预期结果。

您是否从不希望文本位于图像下方？在这种情况下，最简单的方法是简单地将图像放置在文本之外的另一个父级中，并将它们彼此相邻浮动。 Example here.

或者，如果您没有或不想要这些附加元素，请给您的<p>（或任何包装您的文本）一个overflow 值hidden。 Example here.

最后，如果您希望文本漂浮在图像下方而不是立即浮动，您可以简单地为您的图像设置一个底部边距以将文本向下推。 Example here.

【讨论】：

【解决方案4】：

只需使用以下 CSS

img { float: left; }
p{ overflow: auto; }

【讨论】：