HTML 卡片图标不固定在该给定位置；他们随着卡片的名字而改变

Question

我不擅长设计像 HTML 和 CSS 这样的部分，但我使用 html 和 CSS 制作了一张卡片，我正在使用 PHP 从数据库中获取数据，我已经修复了我的 HTML 和 CSS 代码中的所有内容，但是问题是当从数据库中获取数据时，顶部图标会移动。

我不明白为什么会这样，因为从数据库中提取了 20-25 张卡片，图标会根据卡片上的名称自行调整。

我使用了边距和填充，但它们在我的 CSS 代码中都不起作用。

<p style="font-size:14px; font-weight:bold; text-transform: uppercase; position:absolute:top:0px;">
  New Star Tent House

  <!--icons-->

  <img src="icons/fav.png" style="position:relative; top:-4px; left:110px; width:20px; height:20px; -webkit-transition:all 2s .2s; -moz-transition:all 2s .3s; transition:all 2s .3s" /></a>

  <img src="icons/location.png" style="position:relative; top:-4px; left:110px; width:25px; height:25px;" />

我希望图标固定在每张卡片上，无论名称是长是短。

这张图片显示了我想要的图标位置

这张图片显示了图标位置相对于名称的变化

Answer 1

试试这个:

从 image 标签中移除 left:。添加一个 span 或 div 以包含两个图像，并将 float:right 添加到 span 以便将始终保持在右侧。

<p style="font-size:14px; font-weight:bold; text-transform: uppercase; position:absolute:top:0px;">
  New Star Tent House

  <!--icons-->

  <span style="float:right; display:inline-block"><img src="icons/fav.png" style="position:relative; top:-4px; width:20px; height:20px; margin-right:10px; -webkit-transition:all 2s .2s; -moz-transition:all 2s .3s; transition:all 2s .3s" /></a>

  <img src="icons/location.png" style="position:relative; top:-4px; width:25px; height:25px;" /></span>