html - 换行后文字在 img 元素后面

Question

我在我的网站上有一个主要文章部分，其中有一个 img，右侧是 img 的描述。的话到达容器端后，如果应该断行并在 img 之后再次开始。但我的话是在图像的背后!这是一个可以帮助您理解的 fiddle :JSFiddle .我怎样才能让文字在 img 之后断行并重新开始？是否可以像我一样在同一个容器中执行此操作？我这样给出容器的大小:

div{
    margin-left:2.7vw;
    background:black;
    padding:10px;
    width:50vw;
    height:49vw;
    word-wrap:break-word;
}

像这样的 img/words:

div img{
    margin-left:-10vw;
    position:absolute;
    height:40vh;
    width:25vw;
}

div figcaption{
    color:white;
}

这似乎都是 fiddle 。谢谢您的帮助 ! 谢谢。

Answer 1

您已将图像“绝对”放置。 在图像上使用 float:left 并删除 position:absolute 属性。

https://jsfiddle.net/pa8qq9Lh/