HTML/CSS新手求助：如何实现文本框与图片底部对齐

针对你的需求，我们可以通过 CSS Grid 布局精准控制图片和文本框的位置，解决 inline-block 带来的对齐偏差问题。以下是修改后的代码和关键说明：

修改后的 CSS 代码 #

body {
  background-color: white;
  margin: 0;
  padding: 0;
}

p {
  margin-left: 200px;
  margin-right: 200px;
  text-align: left;
  font-size: 22px;
}

.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  border-radius: 5px;
  margin-bottom: 20px;
}

h1 {
  margin-top: 10px;
  text-align: center;
}

nav {
  margin-top: 0;
  width: 100%;
  background: rgb(97, 157, 255);
  overflow: auto;
}

nav a {
  display: block;
  padding: 20px 15px;
  text-decoration: none;
  font-family: arial;
  color: white;
  text-align: center;
}

nav a:hover {
  background-color: rgb(203, 204, 212);
  transition: 0.4s;
}

ul {
  padding: 0;
  margin: 0 250px 0 200px;
  list-style: none;
}

li {
  margin-bottom: -4px;
  margin-top: -2.5px;
  font-size: 24px;
  float: left;
}

.logo1 img {
  position: absolute;
  margin-top: 0;
  margin-right: 100px;
  width: 16%;
}

/* 核心修改：使用 CSS Grid 重构布局 */
.collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽分布 */
  gap: 10px; /* 元素间留白 */
  margin: auto;
  width: 70%;
  border: 1.5px solid rgba(112, 128, 144, 0.5);
  padding: 10px; /* 内边距避免内容贴边框 */
}

.collage img {
  width: 100%;
  height: 300px;
  object-fit: cover; /* 保持图片比例，防止拉伸变形 */
}

/* 文本框容器样式 */
.collage .text-box {
  border: 1.5px solid rgba(112, 128, 144, 0.5);
  display: flex;
  align-items: flex-end; /* 文本靠底部对齐 */
  justify-content: flex-end; /* 文本靠右对齐 */
  padding: 10px;
}

/* 重置全局 p 样式对文本框的干扰 */
.collage .text-box p {
  margin: 0;
  text-align: right;
}

修改后的 HTML 代码 #

<!DOCTYPE html> <!-- 修正标准写法缺失的空格 -->
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="layout_91893.css">
</head>
<body>
<div class="logo1">
  <a href="index_91893.html"><img src="Maunga_Club_white.png" alt="Maunga Club Logo"></a>
</div>

<nav>
  <ul>
    <li><a href="page1_91893.html">Available Cabins</a></li>
    <li><a href="membership_91893.html">Club Membership</a></li>
    <li><a href="#">Bookings</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">FAQ</a></li>
  </ul>
</nav>
<p style="text-align:center;"> Enjoy the winter season with your family and friends in our premium cabins and chalets based on the Maunga Summit.</p>
<h1>The Kakapo Chalet</h1>
<img src="cabin_exterior.jpg" alt="Cabin Exterior" class="centre">
<div class="collage">
  <img src="bunk_room.jpg" alt="Bunk Room">
  <img src="cabin_view.jpg" alt="Cabin View">
  <img src="hallway.jpg" alt="Hallway">
  <!-- 新增容器包裹文本，便于独立控制布局 -->
  <div class="text-box">
    <p>The Kakapo Chalet is a great choice for a medium to large number of guests.</p>
  </div>
</div>
</body> <!-- 补充缺失的闭合标签 -->
</html>

关键修改说明 #

1. 替换布局体系：用 CSS Grid 替代 inline-block，Grid 能直观定义行列结构，避免 inline-block 因空白字符、宽度计算导致的错位问题。
2. 重置文本样式：全局 p 标签的左右 margin 会干扰 collage 内的文本布局，因此单独重置了文本框内 p 的 margin。
3. 精准对齐控制：通过 align-items: flex-end 和 justify-content: flex-end 让文本同时实现底部和右侧对齐，满足右下角位置需求。
4. 图片优化：添加 object-fit: cover 确保图片在固定高度下保持比例，避免拉伸变形。

可选方案：文本框与右上角图片底部对齐 #

如果你希望文本框直接对齐右上角图片的底部（而非左下角图片），可以改用绝对定位：

.collage {
  position: relative;
  /* 保留其他样式 */
}

.collage .text-box {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: calc(50% - 10px); /* 匹配列宽并减去间距 */
  /* 保留其他样式 */
}

注意：绝对定位会让文本框脱离文档流，需确保 collage 有足够内边距避免内容重叠。

内容的提问来源于stack exchange，提问作者Freshly Spiced Ice