html – 如何将此图像向上推入一段

概述我正在开发一个应用程序,让企业发布到布告栏.每个帖子都是宽320px的div.该职位的内容是在段落和脚下,我把商业标志如下： <div class="post"> <p>Lorum ipsum ...</p> <p>Lorum ipsum ...</p> <img src="..."></div> 标志看起来不是很好,只是在帖子的底部,所以现在我试图将视觉整合得更好.我想把它漂浮在右 我正在开发一个应用程序,让企业发布到布告栏.每个帖子都是宽320px的div.该职位的内容是在段落和脚下,我把商业标志如下：

<div >  <p>Lorum ipsum ...</p>  <p>Lorum ipsum ...</p>  <img src="..."></div>

标志看起来不是很好,只是在帖子的底部,所以现在我试图将视觉整合得更好.我想把它漂浮在右边,并推动它,例如30px,并在其周围有文本流.

我已经尝试向右浮动,设置一个负的上限,但这只是将图像放在(或更多)段落文本.我试着把它放在结尾的p标签里,结果相似.我也尝试将显示更改为内嵌块(而不是浮动),但是再次得到类似的结果.

解决方法 通过定义浮标是不可能的.

因此,您有两个选择：

A.要重新排序DOM元素(通过Js),因此您将会围绕该浮动图像包围其余的文本：

<div >  <img src="..." float="right">  <p>Lorum ipsum ...&lt;/p>  <p>Lorum ipsum ...&lt;/p></div>

B.删除文本包装要求.在这种情况下,您现在可以使用标记：

<div >  <p>Lorum ipsum ...&lt;/p>  <p>Lorum ipsum ...&lt;/p>  <img src="..."></div>

但这些风格：

.post { position: relative; }.post > p { margin-right: XXXpx; /* room for the image */ }.post img { position:absolute; right:0; top:0 } /* move it to top/right corner */

现代CSS没有其他选择：要重新排序DOM或删除文本包装.

总结

以上是内存溢出为你收集整理的html – 如何将此图像向上推入一段全部内容，希望文章能够帮你解决html – 如何将此图像向上推入一段所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。