如何将此图像向上推送到段落中

Question

我正在开发一个应用程序,让企业发布到布告栏.每个帖子都是320px宽度的div.帖子的内容是在段落中,在帖子的脚下,我正在放置商业标识,如下:

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

标志看起来不是很好,只是在帖子的底部,所以现在我试图在视觉上更好地整合它.我想将它漂浮到右边,并将其向上推,比方说,30px,并让文本在它周围流动.

我尝试向右浮动并设置负上边距,但这只是将图像放在段落文本下面(或上面).我尝试将它放在结束的p标签内,结果相似.我也尝试将显示更改为内联块(而不是浮动),但再次得到类似的结果.

Answer 1

根据浮标的定义是不可能的.

因此,您有两种选择:

A.要重新排序DOM元素(通过JS),因此您将在浮动图像周围包含其余文本:

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

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

<div class="post">
  <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或删除文本换行.

Answer 2

尝试使用类标签直接将 .css 应用到图像。

<img class="imgleft" src="image.jpg">

在你的 .css 文件中是这样的：

.imgleft {
float: left;
border: 1px solid #90b905;
margin: 5px 10px 10px 15px;
padding: 5px;
}