0

我有一个图像，我想在它周围环绕文字。例如

ttttttt|image|    
ttttttt|     |
tttttttttttttt
tttttttttttttt

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

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本图像

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

我不想使用 JS

非常感激

4

3 回答 3

0

你可以通过两种方式做到这一点。

在图像标签中：

 <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

于 2012-03-28T14:16:51.020 回答
0

我想我对自己的问题有一个解决方案。

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

我的解决方案不是很语义化 - 但除此之外我没有看到问题 - 可能是另一个 http 请求，所以如果有人能看到这个问题，请告诉我。

这是我的做法：

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

然后在内容之后再次添加图像。确保替代文本是适当的。

将图像和文本都包装在一个 div 中并将其设置为“display:relative”

将第一个图像设置为向右浮动，并将其可见性设置为隐藏 将第二个图像设置为 position: absolute 并将其定位在图像上（很容易在容器上显示相对）

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

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

在我的初始测试中似乎运行良好，但感觉就像一个黑客。也许我可以用 flex-box 做点什么，但我会再做一次。如果有人知道更好的解决方案或能想到为什么这真的很糟糕的原因，请告诉我！

于 2012-03-28T19:26:45.803 回答
0

只是说明另一种方法...

只要您对图像在源中的第一个感到高兴（以便它可以浮动），您就可以使用 display:table-caption 在图像不浮动的小屏幕上翻转源

大屏幕

img{
float:left;
}

小屏幕

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

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

希望对尝试做类似事情的人有所帮助。如果这不是很明显，请给我发个便条，我会贴上一些代码。

于 2013-02-27T15:43:48.783 回答