Question

我有一张图片，我希望在它周围包装文字。例如

ttttttt|image|    
ttttttt|     |
tttttttttttttt
tttttttttttttt

如果图像位于源代码中的文本之前，这将很容易。但是，我需要将图像放在文本之后：

文字文字文字文本文本文本文本文本文本文本文本文本文本文本文本 IMAGE

我不知道图像尺寸或文本的宽度（因为布局是液体）

我不想使用JS

非常感谢

Answer 1

你可以采取两种方式。

在图片标记中：

 <img src="http://www.wesleyeterry.com/apple-touch-icon-precomposed.png" align="left" vspace="4" hspace="4">

或者在CSS中：

<style>
img {
float:left;
margin:2px;
}

Answer 2

我想我能解决自己的问题。

这对我有用，因为我希望图像在源文本之后出现的原因是在小屏幕上我没有浮动它，我希望内容在图像上方。如果图像是第一个，那么它在一个小屏幕上会太高。

我的解决方案不是非常语义 - 但除此之外我没有看到问题 - 可能是另一个http请求，所以请让我知道是否有人可以看到这个问题。

以下是我的表现：

添加图像两次。在文本之前。确保“alt”为空。

然后在内容后再次添加图像。确保替代文字合适。

将图像和文本包裹在div中并将其设置为“display：relative”

将第一个图像设置为向右浮动，将其可见性设置为隐藏将第二个图像设置为位置：绝对并将其放置在图像上（显示器相对于容器容易）

浮动图像充当绝对定位的浮动图像，我们不必使用JS来计算任何尺寸，因此如果使用最大宽度，图像将缩小，文本仍将按预期运行（没有任何回调给JS以获得新的维度）

然后对小屏幕使用媒体查询，我将第一张图像设置为“display：none”，并且没有将绝对位置应用于第二张图像。因此，就用户而言，他们会看到内容，然后是图片。

似乎在我的初始测试中运作良好，但感觉就像一个黑客。也许我可以用flex-box做点什么，但我会再把它留下来。如果有人知道更好的解决方案，或者可以想出为什么这是非常糟糕的原因那么请告诉我！

Answer 3

只是注意另一种方法来做到这一点......

只要您对图像在源中的第一个感到高兴（因此它可以浮动），您可以使用display：table-caption在小屏幕上翻转图像未浮动的源，因此< / p>

大屏幕

img{
float:left;
}

小屏幕

.container{
display:table;
caption-side: bottom;
}

img{
float:none;
display: table-caption;
}

希望能帮助某人尝试做类似的事情。如果那不明显，请给我一个注释，我会坚持一些代码。