Html 页脚文本的定位

我正在尝试添加一个类似Airbnb的页脚。我已经能够完成前两个专栏。然而，第三个总是略低于其余的。我试过： 位置：绝对，但这会使其消失 Position:relative这可以很好地工作，但是它会删除其他两列中的链接。 浮动：左右移动，但不让我向上移动

如果有人能帮我的话，我想不出该怎么办了，那太好了。这是我的代码和我制作的图像

页脚{ 边框样式：实心； 边框颜色：灰色； 边框宽度：0.25px； 背景色：EF6248； -webkit盒阴影：0 5px 10px-6px黑色； -moz盒阴影：0 5px 10px-6px黑色； 盒影：0 5px 10px-6px黑色； /*注：页脚阴影*/ 垫底：200px； 利润率最高：10%； /*注意：页脚在页面上的位置*/ } .页脚链接{ 颜色：白色； } .页脚链接：悬停{ 颜色：黑色； } .col-1{ 左侧填充：150px； 填充顶部：15px； 线高：40px； 颜色：白色； 字体系列：雷威； 字体大小：粗体； 显示：表格； 浮动：左； } .col-1 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } .col-2{ 填充顶部：15px； 左侧填充：130像素； 线高：40px； 颜色：白色； 字体系列：雷威； 字体大小：粗体； 显示：表格； 位置：相对位置； } .col-2 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } 上校3{ 填充顶部：15px； 左侧填充：550px； 填充底部：100px； 底部：100px； 颜色：白色； 字体大小：粗体； 显示：表格； 浮动：左； 波西蒂 } .col-3 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } 狂欢 活动主持人 活动服务

---

这些是导致问题的原因：

positi而非position：col-3中的相对位置 浮动：左至第2列 页脚{ 边框样式：实心； 边框颜色：灰色； 边框宽度：0.25px； 背景色：EF6248； -webkit盒阴影：0 5px 10px-6px黑色； -moz盒阴影：0 5px 10px-6px黑色； 盒影：0 5px 10px-6px黑色； /*注：页脚阴影*/ 垫底：200px； 利润率最高：10%； 边框：10px纯绿； /*注意：页脚在页面上的位置*/ } .页脚链接{ 颜色：白色； } .页脚链接：悬停{ 颜色：黑色； } .col-1{ 左侧填充：150px； 填充顶部：15px； 线高：40px； 颜色：白色； 字体系列：雷威； 字体大小：粗体； 显示：表格； 浮动：左； } .col-1 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } .col-2{ 填充顶部：15px； 左侧填充：130像素； 线高：40px； 颜色：白色； 字体系列：雷威； 字体大小：粗体； 显示：表格； 位置：相对位置； 浮动：左； } .col-2 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } 上校3{ 填充顶部：15px； 左侧填充：130像素； 线高：40px； 颜色：白色； 字体系列：雷威； 字体大小：粗体； 显示：表格； 位置：相对位置； 浮动：左； } .col-3 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } 狂欢 活动主持人 活动服务

---

您已经将col-1和col-3定义为float，还需要将col-2定义为float:left。见下面我修改的代码

页脚{ 边框样式：实心； 边框颜色：灰色； 边框宽度：0.25px； 背景色：EF6248； -webkit盒阴影：0 5px 10px-6px黑色； -moz盒阴影：0 5px 10px-6px黑色； 方框阴影：0 5px 10px-6px黑色；/*注意：页脚阴影*/ 垫底：200px； 页边距顶部：10%；/*注：页脚在页面上的位置*/ } .页脚链接{ 颜色：白色； } .页脚链接：悬停{ 颜色：黑色； } .col-1{ 左侧填充：150px； 填充顶部：15px； 线高：40px； 颜色：白色； 字体系列：雷威； 字体大小：粗体； 显示：表格； 浮动：左； } .col-1 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } .col-2{ 填充顶部：15px； 左侧填充：130像素； 线高：40px； 颜色：白色； 字体系列：雷威； 字体大小：粗体； 显示：表格； 位置：相对位置； 浮动：左； } .col-2 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } 上校3{ 填充顶部：15px； 左侧填充：550px； 填充底部：100px； 底部：100px； 颜色：白色； 字体大小：粗体； 显示：表格； 浮动：左； 波西蒂 } .col-3 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } 狂欢 活动主持人 活动服务 基本上，您缺少float：左上角的.col-2和.col-3。这将使第三个链接组位于顶部。然后，可以在.col-3上设置行高度，以确保它与其他两个组水平对齐

还要注意，在下面的代码片段中，我在主体上设置了一个最小宽度，以确保列不会换行

身体{ 最小宽度：800px； } 页脚{ 边框样式：实心； 边框颜色：灰色； 边框宽度：0.25px； 背景色：EF6248； -webkit盒阴影：0 5px 10px-6px黑色； -moz盒阴影：0 5px 10px-6px黑色； 盒影：0 5px 10px-6px黑色； /*注：页脚阴影*/ 垫底：200px； 利润率最高：10%； /*注意：页脚在页面上的位置*/ } .页脚链接{ 颜色：白色； } .页脚链接：悬停{ 颜色：黑色； } .col-1{ 左侧填充：150px； 填充顶部：15px； 线高：40px； 颜色：白色； 字体系列：雷威； 字体大小：粗体； 显示：表格； 浮动：左； } .col-1 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } .col-2{ 填充顶部：15px； 左侧填充：130像素； 线高：40px； 颜色：白色； 字体系列：雷威； 字体大小：粗体； 显示：表格； 位置：相对位置； 浮动：左； } .col-2 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } 上校3{ 填充顶部：15px； 左侧填充：50px； 填充底部：100px； 底部：100px； 颜色：白色； 字体大小：粗体； 显示：表格； 浮动：左； 线高：40px； } .col-3 span{ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } 狂欢 活动主持人 活动服务

---

请不要把它弄得太复杂。它很简单，样式很少。检查下面的示例

页脚{ 宽度：100%； 边框样式：实心； 边框颜色：灰色； 边框宽度：0.25px； 背景色：EF6248； -webkit盒阴影：0 5px 10px-6px黑色； -moz盒阴影：0 5px 10px-6px黑色； 方框阴影：0 5px 10px-6px黑色；/*注意：页脚阴影*/ 垫底：200px； 页边距顶部：10%；/*注：页脚在页面上的位置*/ 颜色：白色； 线高：22px； 字体大小：正常； 显示：表格； } .页脚链接{ 颜色：白色； } .页脚链接：悬停{ 颜色：黑色； } .col-1， .col-2， 上校3{ 宽度：30%； 利润率：01.65%； 浮动：左； } 狂欢 活动主持人 活动服务 应使用以防止因填充而增加宽度

footer *{
   box-sizing:border-box;
}

用于更好地对齐和定位

.footer{
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

---

谢谢大家！修复问题：再次感谢您的解决方案。