Question

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

当文本足够时，文本将开始在图像下移动并从那里继续，例如：

[ 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

我该怎么做呢？我确信这是一个简单的修复，可能与图像的显示属性，对齐属性等有关。

谢谢！

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

Answer 2

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

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

我希望这有帮助！

Answer 3

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

你从不希望文字在图片下方？在这种情况下，最简单的方法是将图像简单地放在另一个父文件而不是文本中，然后将它们彼此相邻放置。 Example here

或者，如果您没有或不想要这些其他元素，请将<p>（或包含文字的内容）的overflow值hidden。 Example here

最后，如果您希望文本浮动在图像下方而不是立即浮动，则可以简单地为图像提供底部边距以将文本向下推。 Example here

Answer 4

只需使用以下CSS

即可

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

如何停止左侧图像下方的文字？

4 个答案: