列底部的布尔玛对齐按钮

Question

所以我很难对齐布尔玛专栏底部的按钮。

我希望按钮“购买”位于右栏的底部（与按钮“你好”并排）。我处于这种情况是因为我的其他专栏内容更长。

到目前为止，我在按钮上尝试了这些 CSS 样式（但没有一个对我有帮助）：

vertical-align: bottom;

---

margin-bottom: auto;

---

position: absolute;
bottom: 0;

这是我的 HTML：

<section class="section">
    <div class="columns is-centered">
        <div class="column is-one-fifth">
            <h4 class="title is-4">I'm a big column</h4>
            I'm taller than the column next to me so my column will be bigger, lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            <h6 class="sub">"lorem ipsum"</h6>
            <button class="button is-fullwidth">Hello</button>
        </div>

        <div class="column is-one-fifth">
            <h4 class="title is-4">I'm a small column</h4>
            I'm a small column, and my button missplaced
            <h6 class="sub">"lorem ipsum"</h6>
            <button class="button is-fullwidth">BUY</button>
        </div>
    </div>
</section>

你们能帮我吗？谢谢。

Answer 1

好吧，答案是：布尔玛列需要有一些属性（@ahsan-ullah 建议）。然后按钮需要有一个顶部的自动边距。

<section class="section">
    <div class="columns is-centered">
        <div class="column is-one-fifth item">
            <h4 class="title is-4">I'm a big column</h4>
            I'm taller than the column next to me so my button will be higher,lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            <h6 class="sub">"lorem ipsum"</h6>
            <button class="button is-fullwidth">Hello</button>
        </div>

        <div class="column is-one-fifth item">
            <h4 class="title is-4" style="align-self: flex-start;">I'm a small column</h4>
            I'm a small column, and my button is well placed
            <h6 class="sub">"lorem ipsum"</h6>
            <button class="button is-fullwidth">BUY</button>
    </div>
    </div>
</section>

.item{
    display:flex;
    flex-direction:column;
    justify-content:space-between
  }

.columns button{
    margin-top: auto;
  }

结果 ：