无Bootstrap或网格系统：浮动布局下垂直对齐按钮及保持列等高的最优方案

嘿，浮动布局在处理这类需求时确实是个经典小坑，我给你推荐最简洁可靠的解决方案——用Flexbox替代浮动布局，完全不需要依赖任何框架，浏览器兼容性也足够好（支持IE11及以上）。

一、推荐方案：Flexbox实现（首选） #

1. 调整CSS样式 #

给.service的父容器（我们新增一个.services-container作为父容器）设置Flex属性，同时改造子元素的样式：

/* 父容器：用Flex替代浮动，自动处理列间距和等高 */
.services-container {
  display: flex;
  gap: 2%; /* 替代nth-child的margin，更直观地控制列间距 */
}

/* 子元素：去掉浮动，设置垂直方向的Flex布局 */
.service {
  width: 32%;
  display: flex;
  flex-direction: column; /* 让内部的h2、p、button垂直排列 */
}

/* 关键：让按钮自动推到底部 */
.service button {
  margin-top: auto; /* 利用Flex的自动间距特性，把按钮挤到容器底部 */
}

2. 补全HTML结构（添加父容器） #

<div class="services-container">
  <div class="service">
    <h2>Service 1 </h2>
    <p>this is service</p>
    <button>click</button>
  </div>
  <div class="service">
    <h2>Service 2</h2>
    <p>this is a longer service description that would make the column taller otherwise</p>
    <button>click</button>
  </div>
  <div class="service">
    <h2>Service 3</h2>
    <p>short text here</p>
    <button>click</button>
  </div>
</div>

3. 方案优势 #

• 自动等高：Flex容器下的所有子元素默认保持高度一致，无需额外hack。
• 完美底部对齐：margin-top: auto是Flex布局的实用技巧，不管上方内容长短，按钮都会牢牢贴在容器底部。
• 响应式适配简单：如果要适配小屏幕，只需添加一段媒体查询：

@media (max-width: 768px) {
  .services-container {
    flex-direction: column;
    gap: 1rem; /* 垂直方向的间距 */
  }
  .service {
    width: 100%; /* 小屏幕下占满宽度 */
  }
}

二、备选方案：保留浮动布局（不推荐） #

如果因特殊限制必须保留浮动布局，可以用绝对定位+清除浮动的方式实现，但这种方法维护性较差：

/* 父容器清除浮动，确保包裹子元素 */
.services-container {
  overflow: hidden;
}

.service {
  float: left;
  width: 32%;
  position: relative;
  padding-bottom: 50px; /* 手动给按钮预留底部空间 */
}

.service:nth-child(2) {
  margin: 0 2%;
}

/* 按钮绝对定位到底部 */
.service button {
  position: absolute;
  bottom: 10px;
  left: 15px; /* 根据布局调整左右位置 */
}

这种方法的弊端很明显：需要提前预估按钮高度设置padding-bottom，如果按钮内容换行或高度变化，容易出现重叠；同时等高需要额外的hack处理，远不如Flexbox省心。

所以还是强烈推荐使用Flexbox的方案，简洁又可靠！

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