javascript - CSS 将文本置于图像之上

Question

.content {
  float: left;
  width: 33.33%;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 2px;
  overflow-wrap: break-word;
}

.content_div {
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
  font-size: 16px
}

.title {
  float: left;
  width: 100%;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 2px;
  overflow-wrap: break-word;
}

.title_div {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  font-size: 20px
}

<div style="position: relative; float:left;">
  <div class="title_div">
    <p class="title">801 BAOER BLACK ROLLER PEN</p>
  </div>
  <img src="http://52.66.90.164/Show_barcode">
  <div class="content_div">
    <p class="content">52305</p>
    <p class="content">Packet</p>
    <p class="content">MRP: 300</p>
  </div>
</div>

我想要相同的布局，但标题和内容宽度是图像的 100%。如果我删除标题然后内容宽度根据图像。标题宽度与图片不符。如何根据图像制作标题宽度？如果我在 title parent div 中添加一个绝对位置，那么布局就会改变。我该如何解决这个问题？

Answer 1

向图像添加 width: 100%; 可以解决这个问题，但正如 VXp 所说，内联样式很少是个好主意!