HTML/CSS - <p> 以意想不到的方式在 <img> 的底部对齐

Question

从数据库读取数据

while($row = mysqli_fetch_array($listOfRecipes)){
      echo '<div class="one_recipe">';
          echo '<div class="recipe_style">';
               echo "<a href=\"project2.php?recipe={$row['RecipeId']}\"><img src=\"{$row['RecipePhoto']}\" class=\"food_img_style\" /></a>";
          echo '</div>';
          echo "<p class=\"recipe_title_style\">{$row['RecipeName']}</p>";
      echo '</div>';
}

样式.css

        .one_recipe{
            margin-right: 44px;
            margin-left: 35px;
            display:inline-block;
            text-align:left;
            margin-top: 10px;
            margin-bottom: 10px;
            z-index: 2;
        }

        .recipe_style{
            display:inline-block;
            padding: 3px;
            border: 1px solid grey;
            border-radius: 1px;
            background: #ECF0F1;
            z-index: 3;
        }

        img.food_img_style{
            max-width: 200px;
            max-height: 200px;
            width: 160px;
            height: 180px;
            padding: 0px;
        }

        p.recipe_title_style{
            font-weight: bold;
            margin-top: 5px;
            width: 160px;
        }

结果

我试图对齐 <p>图片底部的标记，但如上图所示，它覆盖了 <img> 的区域并将其推出。有没有办法使它们垂直对齐相同，即使内容的宽度为 <p>是否超过 160px？

Answer 1

这里有 2 个解决方案:

1. 将 vertical-align: top 添加到 .recipe_style 规则。因此它将对齐到顶部而不是底部。

2. “省略”.recipe_title_style 中的文本:

   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   

第一个更简单，但是如果您有超过 3 个元素要在网格中显示，我更喜欢第二个，但是它有点复杂，并且假设您的图像始终具有相同的大小。