时间戳

首页 > 解决方案 > CSS将文本放在图像顶部

javascript - CSS将文本放在图像顶部

问题描述

.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%。如果我删除标题，则内容宽度根据图像。标题宽度与图片不符。如何根据图像制作标题宽度？如果我在标题父级中添加一个绝对位置，div那么布局就会改变。我该如何解决这个问题？

标签： javascripthtmlcss

解决方案

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

推荐阅读