2

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

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

[ 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

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

谢谢！

4

4 回答 4

6

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

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

于 2013-05-31T13:16:11.657 回答
0

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

你不想让文字出现在图片下方吗？在这种情况下，最简单的方法是简单地将图像放置在文本之外的另一个父级中，并将它们彼此相邻浮动。这里的例子。

或者，如果您没有或不想要这些额外的元素，请给您的<p>（或包装文本的任何东西）overflow一个hidden. 这里的例子。

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

于 2013-05-31T13:21:55.270 回答
0

只需使用以下 CSS

img { float: left; }
p{ overflow: auto; }
于 2013-05-31T13:24:35.873 回答
0

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

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

我希望这有帮助！

于 2013-05-31T13:16:03.513 回答