css 如何让图片位于文字的下方，文字在上面 图片在文字的下面（图片是一张虚线）而文字右边又有一张图片

Posted 2023-04-06

如图

这个可以利用border-buttom设置虚线的边框
border-buttom:1px dashed;这样，

效果看这个
http://www.w3school.com.cn/tiy/t.asp?f=csse_border-bottom-style追问

我想用图片的的 下次改的时候好改

追答

那就用background吧，兼容性最好了。

参考技术A 将你做好的虚线图片，作为标签li的背景图
background:url(图片路径) left bottom;追问

谢谢 不过我试过这个方法 不好用 我的虚线图片在文字的上面了

如何在图片旁边放置文字？ [关闭]

【中文标题】如何在图片旁边放置文字？ [关闭]

【英文标题】：How to place a text next to the picture? [closed]

【发布时间】：2012-03-11 09:58:40

【问题描述】：

我想放置 2 张图片，一张在页面顶部，另一张在页面下方。然后，我想为每张图片写一些东西，并且我希望文字位于每张图片的右侧。

如何做到这一点？

我将我的图片格式化如下，但问题是图片就像他们想象的那样，但文字似乎只是第一张图片。

<p style="float: left; clear: left"><img src="image.jpg"   border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p style="float: left; clear: left"><img src="image.jpg"   border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>

【问题讨论】：

谷歌有很多例子。

【参考方案1】：

只需像这样使用一些包装器 div：

<div>
    <p style="float: left;"><img src="http://placekitten.com/g/200/200"   border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div style="clear: left;">
    <p style="float: left;"><img src="http://placekitten.com/g/200/200"   border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>

jsFiddle示例

【讨论】：

我想我必须使用 div。我试图避免它们和换行符。

【参考方案2】：

有几件事可能会有所帮助：

您的样式不需要内联，但为了简洁起见，我假设您将它们放在那里。

图片不需要包裹<p>；样式可以应用于<img> 本身。

听起来您真正想要的是两块不同的内容，每块都有一个图像和一些文本。我建议将图像放在<p> 元素内——它是内联的，而<p> 是块状的。首先放置图像，然后将其浮动到左侧，就像您尝试过的那样。那应该可以实现您的目标。