我有一张图片，我想在它周围加上文字。例如
ttttttt|image|
ttttttt| |
tttttttttttttt
tttttttttttttt
如果图像在源代码中的文本之前，这将很容易。但是，我需要图像出现在这样的文本之后：
文本文本文本文本 文字文字文字文字 文字文字文字文字 文字文字文字文字 图片
我不知道图像尺寸或文本的宽度（因为布局是流动的）
我不想用JS
非常感谢
【问题讨论】：
标签： css liquid-layout
你可以通过两种方式做到这一点。
在图片标签中：
<img src="http://www.wesleyeterry.com/apple-touch-icon-precomposed.png" align="left" vspace="4" hspace="4">
或者在 CSS 中：
<style>
img {
float:left;
margin:2px;
}
http://www.wesleyeterry.com/apple-touch-icon-precomposed.png
【讨论】：
我想我自己的问题有一个解决方案。
这对我有用，因为我希望图像出现在源文本之后的原因是在小屏幕上我没有浮动它，我希望内容位于图像上方。如果图像是第一个，那么它在小屏幕上就太高了。
我的解决方案不是很语义化 - 但除此之外我没有看到问题 - 可能是另一个 http 请求，所以请让我知道是否有人能看到这个问题。
这是我的做法：
添加图像两次。首先在正文之前。确保“alt”为空。
然后在内容之后再次添加图像。确保替代文本是适当的。
将图像和文本包装在一个 div 中并将其设置为“display:relative”
将第一张图片设置为向右浮动，并将其可见性设置为隐藏 将第二个图像设置为 position: absolute 并将其定位在图像上（很容易在容器上显示相对）
浮动图像充当绝对定位图像的浮动，我们不必使用 JS 来计算任何尺寸，因此如果使用最大宽度，图像将缩小，文本仍将发挥应有的作用（无需任何回调 JS 来获取新维度）
然后对小屏幕使用媒体查询，我将第一张图片设置为“display:none”，并且没有将绝对位置应用于第二张图片。因此，就用户而言，他们看到的是内容，然后是图像。
在我的初始测试中似乎运行良好，但感觉就像一个 hack。也许我可以用 flex-box 做点什么，但我会再做一次。如果有人知道更好的解决方案或能想到为什么这很糟糕的原因，请告诉我！
【讨论】：
只是说明另一种方法...
只要您对图像在源中排在第一位（以便它可以浮动）感到满意，您就可以使用 display:table-caption 在图像不浮动的小屏幕上翻转源，所以
大屏幕
img{
float:left;
}
小屏幕
.container{
display:table;
caption-side: bottom;
}
img{
float:none;
display: table-caption;
}
希望对尝试做类似事情的人有所帮助。如果这不是很明显，请给我留言，我会贴上一些代码。
【讨论】：