两个Div与浮动按钮布局异常求助：自适应Div并排及底部定位问题

首先，你遇到的核心问题是：用display: table-cell实现并排布局时，table-cell元素会忽略float属性，所以你想让第三个div浮动在第一列底部的逻辑根本行不通——表格的布局模型和浮动是完全冲突的。

下面给你两种实用的解决方案，分别适配现代浏览器和旧浏览器场景：

方案一：Flexbox布局（推荐，现代浏览器友好） #

Flexbox是目前最方便的布局方式，能轻松实现自适应并排+元素定位的需求，结构也更清晰。

HTML结构调整 #

把第一列的内容和底部元素放在同一个容器里，这样就能统一控制第一列的布局：

<div class="header">
  <!-- 第一列容器：包含内容和底部元素 -->
  <div class="first-column">
    <div class="header-text">这里是第一列的自适应内容</div>
    <div class="bottom-element">我是要固定在第一列底部的div</div>
  </div>
  <!-- 第二列 -->
  <div class="cart-pos">这里是第二列的内容</div>
</div>

CSS样式 #

.header {
  width: 100%;
  display: flex;
  gap: 35px; /* 替代你原来的margin-left，控制两列间距 */
}

.first-column {
  flex: 1; /* 让第一列自动填充剩余宽度，实现自适应 */
  display: flex;
  flex-direction: column; /* 让容器内元素垂直排列 */
  min-height: 200px; /* 可选：设置最小高度，确保底部元素能显示在底部（根据实际内容调整） */
}

.header-text {
  /* 第一列内容的样式，比如字体、颜色等 */
}

.bottom-element {
  margin-top: auto; /* 关键：把元素自动推到容器底部 */
  /* 可以加你需要的样式，比如margin-bottom: 10px; */
}

.cart-pos {
  /* 第二列的样式，如果是固定宽度可以加width: xxx; */
  padding-right: 5px;
  margin-bottom: 10px;
}

方案二：浮动+定位（兼容旧浏览器） #

如果需要兼容IE这类旧浏览器，可以用浮动实现并排，再通过绝对定位把底部元素固定在第一列底部。

HTML结构 #

<div class="header">
  <div class="first-column">
    <div class="header-text">这里是第一列的自适应内容</div>
    <div class="bottom-element">我是要固定在第一列底部的div</div>
  </div>
  <div class="cart-pos">这里是第二列的内容</div>
  <!-- 清除浮动，避免父容器高度塌陷 -->
  <div class="clearfix"></div>
</div>

CSS样式 #

.header {
  width: 100%;
}

.first-column {
  float: left;
  /* 计算第一列宽度：总宽度 - 第二列宽度 - 两列间距 */
  width: calc(100% - 200px - 35px); 
  margin-right: 35px;
  position: relative; /* 为底部元素的绝对定位提供参考 */
  min-height: 200px; /* 可选：设置最小高度 */
}

.bottom-element {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* 让底部元素和第一列同宽 */
}

.cart-pos {
  float: left;
  width: 200px; /* 第二列固定宽度，根据实际需求调整 */
  padding-right: 5px;
  margin-bottom: 10px;
}

/* 清除浮动的通用样式 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

为什么原来的table布局不行？ #

display: table-cell的本质是模拟表格单元格，单元格内的元素会遵循表格的布局规则——float属性在table-cell元素中是无效的，而且你无法单独把某个元素定位到单元格底部（除非把第一列拆成两个表格行，但结构会变得冗余）。所以更推荐用上面两种方案来实现你的需求。

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