仅在图像存在时才在文本下进行文本换行

Question

我正在尝试将图片对齐到图片的右侧或左侧。这可以通过浮动或弯曲轻松实现。但是，我正在尝试使用垂直对齐。

我所看到的是，我可以通过垂直对齐给人留下文字向左或向右浮动的印象。

我遇到的问题是，当文本量超过容器的宽度时，文本会断开（按预期）到新行。但是，不是直接在原始下方的新线，而是在图片的右侧/左侧，断点不会在图像下插入文本。

一些非常简单的代码演示了这个

<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" style="vertical-align:top"/> Please  enter lots of words

https://jsfiddle.net/metkc72p/

我不想使用float或flex，因为这是为了理解限制。

我的问题纯粹是因为我能对这种尴尬的分裂做任何事情。

图像很好地证明了这一点。第一个是我想要实现的，第二个是我现在得到的！

Answer 1

您的图片和文字都是内嵌级元素。

从浏览器的角度来看，图片和文字都在同一条线上。

从您的角度来看，想象图像只是行上的另一个单词，但是font-size: 3em。

由于图像的高度较高，文本被强制包裹在远处，导致段落内的间隙很大。

但是如果文本和图像大小相同，那么包装看起来更自然。

＆＃13;

＆＃13;

img {
  height: 15px;
}

＆＃13;

<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"> Here is some content... I'm hoping there is enough content so that it runs over multiple 'lines' (rows) so you can see where the text breaks, it ends up underneath
the image. I'd expect there to be 3 or 4 rows of text until it breaks like this, and not break at the first

＆＃13;

＆＃13;

＆＃13;

revised demo

如果您不希望文本包装在图像下，请使用其他方法，例如flexbox：

＆＃13;

＆＃13;

body {
  display: flex;
}

＆＃13;

<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"> Here is some content... I'm hoping there is enough content so that it runs over multiple 'lines' (rows) so you can see where the text breaks, it ends up underneath
the image. I'd expect there to be 3 or 4 rows of text until it breaks like this, and not break at the first

＆＃13;

＆＃13;

＆＃13;

Answer 2

div {
  float: left;
  width: 50%;
}

<div>
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" style="vertical-align:top"/>
</div>
<div>
Here is some content... I'm hoping there is enough content so that it runs over multiple 'lines' (rows) so you can see where the text breaks, it ends up underneath the image. I'd expect there to be 3 or 4 rows of text until it breaks like this, and not break at the first 
</div>

使用div并将width和float提供给div。检查这个小提琴

https://jsfiddle.net/metkc72p/6/

Answer 3

您应该使用float: left属性。 你可以在这里看到它：https://jsfiddle.net/metkc72p/5/