使用 CSS 将按钮对齐到 div 的底部（我已经均衡了列）
发布于2021-08-03 17:50 阅读(1179) 评论(0) 点赞(8) 收藏(2)
我有三列（单行）包含文本和底部的居中按钮。根据访问者视口，有时文本最终会使一列（垂直）长于另一列，导致底部的按钮不对齐。
为了解决这个问题，我在（在 Divi 主题内）设置了“均衡列”，并基于我添加到列中的临时红色背景，它们似乎具有相同的高度。但是，左侧的两个按钮尽管位于与最大按钮（右侧）高度相同的列中，但并未浮动到 div 的底部。这是一个屏幕截图：
这是我在每个 div 中使用的按钮代码：
<div class="homepage-blurb-buttons-div1"><div class="homepage-blurb-buttons-div2">[maxbutton id="1" text="FREE SITE AUDIT" url="https://www.example.com/examplepage"]</div></div>
这是它们的 CSS（主要用于简单地将它们居中）：
.homepage-blurb-buttons-div1 { text-align:center; margin-top:25px; }
.homepage-blurb-buttons-div2 { display:inline-block; }
我试图将父（div1）设置为“位置：相对；” 和孩子（div2）到“位置：绝对；底部：0；” 正如其他地方所推荐的，但这就是发生的事情：
我想要实现的只是将按钮 div 推到已经均衡的列的底部。在我的截图示例中，这意味着将“免费站点审核”和“免费分析”推到底部。
注意：div 和按钮都没有任何底部边距或填充。
更新：我刚刚注意到，虽然列被均衡，但它并没有调整整个父 div。换句话说，按钮尽可能低地对齐，所以我真正需要的是一些 CSS 来强制左侧的两个 DIV 占用所有可用空间？
解决方案
我建议你使用 Flexbox。
下面的伪代码显示了当margin-top: auto在 flex 列方向上使用时，它将元素推向其父元素的底部。
.outer .inner {
display: flex;
flex-direction: column; /* stack items vertically */
}
.outer .inner .button {
margin-top: auto; /* push button to bottom */
}
/* styling for this demo only */
.outer {
display: flex;
}
.outer .inner {
width: 33.333%;
padding: 5px;
border: 1px dotted red;
}
.outer .inner .header,
.outer .inner .text {
padding: 10px;
}
.outer .inner .button {
border: 1px solid gray;
text-align: center;
}<div class="outer">
<div class="inner">
<div class="header">Header</div>
<div class="text">Some text</div>
<div class="button">Button</div>
</div>
<div class="inner">
<div class="header">Header</div>
<div class="text">Some text, where it can be very very very very very very very very very very very very very very very very very very very very long</div>
<div class="button">Button</div>
</div>
<div class="inner">
<div class="header">Header</div>
<div class="text">Some text that is middle middle middle middle long</div>
<div class="button">Button</div>
</div>
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/167338/bbaa01bc07090076f066/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力