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％。如果我删除标题，则内容宽度根据图像。标题宽度不符合图像。如何根据图像制作标题宽度？如果我在标题父div中添加绝对位置，则更改布局。我该如何解决这个问题？

Answer 1

将{{1}}添加到图像中可以解决这个问题，但正如VXp所说，内联样式很少是一个好主意！

Answer 2

我为你的div添加了一个固定的宽度（.container）（我将hss与html分开）。我将容器设置为与您的图像相同（285px）。如果您不这样做，容器不知道从哪里获取宽度，如果内容太大，则会扩展。

.container {
  float: left;
  position: relative;
  width: 285px;
}

.product {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  font-size: 20px
}

.product > p {
  float: left;
  width: 100%;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 2px;
  overflow-wrap: break-word;
}

.below-barcode {
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
  font-size: 16px
}

.below-barcode > p {
  float: left;
  width: 33.33%;
  font-weight: bold;
  text-align: center;
  margin-top: 5px; margin-bottom: 2px;
  overflow-wrap: break-word;
}

<div class="container">
   <div class="product">
      <p>801 BAOER BLACK ROLLER PEN</p>
   </div>
   <img src="http://52.66.90.164/Show_barcode"> 
   <div style="position:absolute; width:100%; left:0; top:100%;font-size:16px">
      <p style="float:left;width: 33.33%;font-weight:bold;text-align:center;margin-top:5px;margin-bottom:2px;overflow-wrap: break-word;">52305</p>
      <p style="float:left;width: 33.33%;font-weight:bold;text-align:center;margin-top:5px;margin-bottom:2px;overflow-wrap: break-word;">Packet</p>
      <p style="float:left;width: 33.33%;font-weight:bold;text-align:center;margin-top:5px;margin-bottom:2px;overflow-wrap: break-word;">MRP: 300</p>
   </div>
</div>

我希望这有帮助

CSS在文字顶部放置文字

2 个答案: