Zeigt ein Element nach einer Block-Neuzeile an

Question

Ich habe derzeit Folgendes:

Ich möchte das Icon-Div am Ende des Textes einfügen, aber da es ein „Block“ ist, kann ich es nicht zum Laufen bringen.

Gewünschte Ausgabe:

Codeausschnitt:

* {
  font-family: Arial, 'sans-serif'
}

.test {
  display: flex;
}

.info {
  font-family: 'monospace';
  background: black;
  width: 18px;
  height: 18px;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  color: white;
}

<div class="test">
    Donec rutrum congue leo eget malesuada.     Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <div class="info">i</div>
</div>

Answer 1

1. 从容器中删除 display: flex (.test)
2. 将信息图标（.info）设置为 inline-block 并使用 display: inline-block

* {
  font-family: Arial, 'sans-serif'
}

.info {
  display: inline-block;
  font-family: 'monospace';
  background: black;
  width: 18px;
  height: 18px;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  color: white;
}

    Donec rutrum congue leo eget malesuada.     Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   
i