跨度中的文本定位答案

【问题标题】：Text Positioning in Span跨度中的文本定位
【发布时间】：2020-10-08 15:35:03
【问题描述】：

我正在尝试显示与所附图像相似的图像和文本：

这是我尝试过的代码：https://jsfiddle.net/ghdqty2w/1/

我在一个 div 中包含了 3 个跨度，但我无法设置跨度相对于图像的位置。

<div>
                    <span>
                        <img id="productURL" src="https://images.app.goo.gl/xH1qtjAt7krCiXicA" alt="Product Image" width="50" height="60"/>
                    </span>
                    <span style="bottom:10px;">
                        Product Name X 5
                        <br/>
                        50 Kg | 6 Cs
                    </span>
                    <span>
                        500
                    </span>
                </div>

【问题讨论】：

请考虑使用stack snippet 为我们创建您当前问题的minimal, reproducible example。

标签： html css html-table styles

【解决方案1】：

使用此代码：

<div style="display: flex;">
        <span>
          <img
            id="productURL"
            src="https://usabilla.com/graphics/resources/usabilla-logo.png"
            alt="Product Image"
            width="50"
            height="60"
          />
        </span>
        <div>
          <span style="bottom:10px;">
            Product Name X 5
            <br />
            50 Kg | 6 Cs
          </span>
          <span>500</span>
        </div>
      </div>

【讨论】：

【解决方案2】：

你试过给它一个位置吗？例如“底部”之前的“位置：绝对”？除非你告诉他们你给它的定位类型，否则底部、顶部、左侧或右侧之类的东西都不起作用。

【讨论】：