html - CSS - 容器边缘的动态填充

Question

在这里快速提问。我正在使用数据库并在图像顶部插入“图像名称”，如下所示:

目前图像名称的填充是一个数字，但我希望填充一直到图像的边界。我尝试执行“填充:右 250；”，但显然这不会起作用，因为正确的填充从图像名称的末尾开始，其长度可能不同。

这让我开始认为它需要是动态的，而我肯定是新手。我在网上看过各种东西，但似乎找不到类似的东西，这可能意味着我在寻找错误的东西。无论如何，任何帮助都会很棒。

干杯，

jack

**当前的 CSS(显然还有很多，但这是必需的)- **

h3.imageName {
  position: absolute; top: 278px; left: 10; 
  width: 100%;
  z-index: 20;
}

h3.imageName span {
  color: white; 
  font: bold 18px Helvetica, Sans-Serif; 
  background: rgba(0, 0, 0, 0.7); 
  padding: 8;
}

**当前 HTML - **

<h3 class="imageName"><span><?php echo $row['name']; ?></span></h3>

Answer 1

如果图像容器宽度不变，您可以只给整个文本区域一个宽度。也可以考虑在这种情况下使用 bottom: 0; 而不是 top:#。