正确对齐图像并为内容留下图像空间

Question

我想要一个类似于此Image..!

的输出

以下是我尝试过的事情。JSfiddle

P.S：我无法编辑内容的结构。

Answer 1

由于您无法编辑HTML，因此无法正确使用浮动，这将是完美的解决方案。

但是你可以使用绝对定位：

div {
    width: 500px;
    min-height: 100px; /* image height */
    position: relative;
    text-align: justify;
}
img {
    width:100px;
    position: absolute;
    top: 0;
    right: 0;
}
p:first-child {
    max-width: 400px; /* wrapper width - image width */
}

Demo