html - 如何将这张图片向上推到一个段落中

Question

我正在开发一个应用程序，让企业可以在布告栏上发帖。每个帖子都是一个 320px 宽度的 div。帖子的内容是分段的，在帖子的底部，我放了商家的标志，如下:

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

Logo 看起来不太好，只是放在帖子的底部，所以现在我试图在视觉上更好地整合它。我想将它向右浮动，然后向上推，比如 30 像素，让文本围绕它流动。

我试过向右浮动并设置负上边距，但这只是将图像放在段落文本下方(或上方)。我试着把它放在结尾的 p 标签中，结果相似。我也尝试将显示更改为内联 block (而不是 float 它)，但再次得到类似的结果。

Answer 1

根据 float 的定义，这是不可能的。

因此你有两个选择:

一个。重新排序 DOM 元素(通过 JS)，这样你就会有 其余文本 环绕着那个 float 图像:

<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，要么放弃文本换行。