将浮动框向下移动一行

Question

我试图在文本中产生类似于“sidebox”的效果，其中段落开头的注释或标题“浮动”在左侧或右侧，周围有一些负面 space它，略低于顶部，如此处的日期：

像这样的简单浮动不允许我将注释移到第一行下方，所以我得到了一个完整的文本行：

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
}

<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

仅设置填充或边距只会使框变大，但我想将整个内容向下移动。设置绝对定位意味着不再保留space和重叠

有什么方法可以做到这一点（并且仍然让注释在段落中排在第一位？）

Answer 1

恐怕这是不可能的，至少不可能在所有情况下将它向下移动一行（或任何数量的行或像素） .

您唯一可以做的就是将 span 元素本身移动到您的 HTML 代码中，即稍后将其插入 p 标记中：

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
}

<p>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. <span class="note">29 July, 1814.</span>I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

Answer 2

shape-outside 可以这样做：

.note {
  float: right;
  margin: 0 0.5em;
  padding-top:1.1em; /* padding equal (or slightly smaller) to one line */
  shape-outside:inset(1.2em 0 0 0); /* this will do the magic */
}

p {
  line-height:1.2em; /* height of a line */
}

<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

边距：

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  padding-top:1.2em; 
  shape-outside:inset(1.2em 0 0 0); 
}

p {
  line-height:1.2em; 
}

<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

Answer 3

Temani Afif 描述的 Shape-outside 绝对是最干净、最灵活的解决方案，我推荐它。但既然你被告知这是不可能的，我将向你展示一个旧的解决方案。您可以在浮动跨度之前加上另一个宽度为零的浮点数和要将其向下移动的高度，由 ::before 伪元素构造。在这种情况下，我们将使用一个文本行的高度。然后只需要设置浮动跨度以清除构造的浮动。

.note {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  clear: right;
}

p::before {
  float: right;
  content: '0C';
}

body {
  width:375px;
}

<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; and saw a costume very unlike</p>

将浮动框向下移动一行

Move a floated box down one line

html

css

word-wrap

css-float