我正在开发一个应用程序,让企业发布到布告栏.每个帖子都是宽320px的div.该职位的内容是在段落和脚下,我把商业标志如下:
<div class="post"> <p>Lorum ipsum ...</p> <p>Lorum ipsum ...</p> <img src="..."> </div>
标志看起来不是很好,只是在帖子的底部,所以现在我试图将视觉整合得更好.我想把它漂浮在右边,并推动它,例如30px,并在其周围有文本流.
我已经尝试向右浮动,设置一个负的上限,但这只是将图像放在(或更多)段落文本.我试着把它放在结尾的p标签里,结果相似.我也尝试将显示更改为内嵌块(而不是浮动),但是再次得到类似的结果.
解决方法
通过定义浮标是不可能的.
因此,您有两个选择:
A.要重新排序DOM元素(通过JS),因此您将会围绕该浮动图像包围其余的文本:
<div class="post"> <img src="..." float="right"> <p>Lorum ipsum ...</p> <p>Lorum ipsum ...</p> </div>
<div class="post"> <p>Lorum ipsum ...</p> <p>Lorum ipsum ...</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或删除文本包装.
原文地址:https://www.jb51.cc/html/225040.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。