如何让第三个div（按钮）对齐第一个div底部？多高度div布局求助

当然可以用inline-block实现这个需求！我来帮你调整布局，解决按钮对齐的问题，同时兼顾响应式的要求。

你当前的情况是，三个inline-block元素因为默认的基线对齐规则，导致按钮跟着高度更高的图片走，贴在了图片底部。要让按钮贴在文本div的底部，我们需要调整元素的垂直对齐方式，再配合媒体查询处理小屏幕的布局要求。

方案一：不修改HTML结构的实现 #

如果不想改动现有HTML结构，只需要调整CSS的垂直对齐属性即可：

#container {
  padding: 10px;
  text-align: left; /* 控制inline-block元素的对齐方向 */
}

.text, .image, .button {
  display: inline-block;
  margin: 0 5px;
}

/* 关键调整：让文本和按钮底部对齐，图片顶部对齐 */
.text, .button {
  vertical-align: bottom;
}

.image {
  vertical-align: top;
}

/* 小屏幕下让按钮独占一行，位于图片下方 */
@media (max-width: 768px) {
  .button {
    display: block;
    margin-top: 10px;
  }
}

原理说明 #

• vertical-align: bottom 让文本和按钮的底部对齐，确保按钮贴在文本的底部边缘
• 给图片设置 vertical-align: top，让它和文本的顶部对齐，避免图片的高度影响按钮的位置
• 媒体查询在小屏幕时将按钮设为块级元素，自动换行到图片下方

方案二：调整HTML结构（更易维护） #

如果允许微调HTML结构，把文本和按钮打包成一个独立容器，布局逻辑会更清晰，也更便于后续维护：

修改后的HTML结构 #

<div id="container">
  <div class="text-group">
    <div class="text">这里是你的文本内容</div>
    <div class="button">点击按钮</div>
  </div>
  <div class="image">
    <img src="你的图片地址" alt="图片描述">
  </div>
</div>

对应的CSS样式 #

#container {
  padding: 10px;
  text-align: left;
}

.text-group, .image {
  display: inline-block;
  vertical-align: bottom;
  margin: 0 5px;
  /* 根据需求设置宽度比例 */
  width: 30%;
}

.image {
  width: 65%;
}

.button {
  margin-top: 10px; /* 给按钮和文本添加间距 */
}

/* 小屏幕下让容器独占一行 */
@media (max-width: 768px) {
  .text-group, .image {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}

原理说明 #

• 将文本和按钮放入text-group容器，这个容器和图片都设置为inline-block并底部对齐，按钮自然会跟随文本容器的底部位置
• 小屏幕下将两个容器设为块级元素，按钮会自动位于图片下方，符合响应式要求

这两种方案都基于inline-block实现了你想要的效果，你可以根据自己的实际情况选择合适的方式。

内容的提问来源于stack exchange，提问作者JuztBe