css - 无法将按钮定位到 flex 容器的底部(导入到 WordPress 时)

Question

我是 Flexbox 的新手，但我已经设法创建了一个基本的定价表。我想要实现的关键事情之一是将“注册”按钮(出现在每一列中)定位在列/flex 容器的底部。

我的 HTML 和 CSS 在本地完美运行(在 Chrome 中测试)，但我想将其导入 WordPress(只需通过子主题 CSS 并将 HTML 放入相关页面的编辑器中)。当我这样做时，除了按钮定位外，一切正常。按钮不再位于容器底部。

当我使用开发工具检查 wordpress 代码时，'margin-top: auto' CSS 声明似乎存在，所以我无法弄清楚为什么它没有被应用。

这是我的 HTML 和与 flexbox 相关的 CSS:

<div class="p_columns">
    <div class="p_price p_bdr_1">
        <ul class="p_ul">
            <li class="p_header">Free</li>
            <li class="p_sub_header">Basic</li>
            <li class="p_li">Limited support</li>
            <li class="p_li">Lots of Storage</li>
            <li class="p_li">High speed bandwidth</li>
            <li class="p_li">Premium design</li>
        </ul>
        <a href="#" class="p_btn">Activate</a>

    </div>
    <div class="p_price p_bdr_2">
        <ul class="p_ul">
            <li class="p_header">Free</li>
            <li class="p_sub_header">Basic</li>
            <li class="p_li">Limited support</li>
            <li class="p_li">Lots of Storage</li>
            <li class="p_li">High speed bandwidth</li>
            <li class="p_li">Premium design</li>
        </ul>
        <a href="#" class="p_btn">Sign Up</a>
    </div>
    <div class="p_price p_bdr_3">
        <ul class="p_ul">
            <li class="p_header">Free</li>
            <li class="p_sub_header">Basic</li>
            <li class="p_li">Limited support</li>
            <li class="p_li">Lots of Storage</li>
            <li class="p_li">High speed bandwidth</li>
            <li class="p_li">Premium design</li>
        </ul>
        <a href="#" class="p_btn">Sign Up</a>
    </div>
    <div class="p_price p_bdr_4">
        <ul class="p_ul">
            <li class="p_header">Free</li>
            <li class="p_sub_header">Basic</li>
            <li class="p_li">Limited support</li>
            <li class="p_li">Lots of Storage</li>
            <li class="p_li">High speed bandwidth</li>
            <li class="p_li">Premium design</li>
        </ul>
        <a href="#" class="p_btn">Sign Up</a>
    </div>
</div>

.p_columns {
display: flex;
flex-flow: row wrap;
max-width: 85%;
min-height: 700px;
}

.p_price {
    display: flex;
    flex: 1 0 200px;
    flex-flow: column;
}

.p_btn {
    margin-top: auto;
}

如有任何帮助，我们将不胜感激!

谢谢，托德

Answer 1

添加:

.p_price {
    display: flex;
    flex: 1 0 200px;
    flex-flow: column;
    position:relative;
}
.p_price p {
    position:absolute;
    bottom:0;
}

要使按钮居中，请使用以下代码片段:

.p_price {
    display: flex;
    flex: 1 0 200px;
    flex-flow: column;
    position:relative;
}
.p_price p {
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
}