在图标旁边显示文本

Question

我正在尝试在图标旁边显示文本：

这是图标：

当我将文本放在图标旁边时。第一行“测试：是简单的虚拟......”位于图标中间，但下一行“未知打印机......”位于图标下方。我想要第一行下面的第二行。请看下图：

这就是我的代码的样子：

  <div class="row" style="display:flex;">
            <div class="col">
                <img src=" https://i.stack.imgur.com/Ir7Kl.png" height="50px" width="50px" />
            <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
            </div>
        </div>

我也尝试过这样编写代码：

<div class="row" style="display:flex;">
    <div class="col-auto">
        <img src="https://i.stack.imgur.com/Ir7Kl.png" height="50px" width="50px" />

    </div>
    <div class="col-auto">
        <span style="font-size:20px;font-weight:bold">Test test1:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
    </div>
</div>

上面的代码也不起作用。使用此代码，整个文本都位于图像下方。

我希望文本位于图像旁边，而不是图像下方。

Answer 1

这取决于图像或文本是否应该浮动，整个文本作为块是否正确。

版本 1：浮动：

img {
  float: left;
  margin: 0 10px 2px 0;
}

<div class="row" style="display:flex;">
  <div class="col">
    <img src=" https://i.stack.imgur.com/Ir7Kl.png" height="50px" width="50px" />
    <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
  </div>
</div>

版本 2：单独的块（在

display: contents

上使用

span

使其成为第二个 Flex 子项的一部分：

.col.x>img {
  margin: 0 10px 0 0;
}

.col.x {
  display: flex;
}

.col.x>span {
  display: contents;
}

<div class="row" style="display:flex;">
  <div class="col x">
    <img src=" https://i.stack.imgur.com/Ir7Kl.png" height="50px" width="50px" />
    <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
  </div>
</div>

但实际上我建议修改 HTML 结构以避免跨度上

display: contents

的必要性。只需为整个文本创建一个公共容器，它将用作第二个 Flex 子项：

.col.x>img {
  margin: 0 10px 0 0;
}

.col.x {
  display: flex;
}

<div class="row" style="display:flex;">
  <div class="col x">
    <img src=" https://i.stack.imgur.com/Ir7Kl.png" height="50px" width="50px" />
    <div>
      <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
      and scrambled it to make when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
    </div>
  </div>
</div>