css 列底部的“Bulma对齐”按钮

1mrurvl1 于 2023-02-06 发布在其他

关注(0)|答案(3)|浏览(212)

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

我希望"购买"按钮位于右列的底部（与"您好"按钮并排）。我处于这种情况是因为其他列的内容较长。
到目前为止，我在我的按钮上尝试了这些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>

你们能帮帮我吗？谢谢。

css

来源：https://stackoverflow.com/questions/62376421/bulma-align-button-at-the-bottom-of-a-column

3条答案

按热度按时间

rkttyhzu1#

好吧，找到答案：Bulma列需要有一些属性（@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;
  }

结果：

赞(0）回复(0）举报 2023-02-06

68bkxrlz2#

希望这是你工作的答案。

.maindiv{
  width:200px;
  height:180px;
  border:1px solid red;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between
}

.innerdiv{
  display:flex;
  flex-direction:column;
}

button{
  width:150px;
  height:30px;
  color:white;
  background-color:blue;
  border-radius:4px
}

<div class='maindiv'>
  <h3>Mana Foutan</h3>
  <span>lorem ipsum lorem ispum</span>
  
  <div class='innerdiv'>
    <i>Make it rain!</i>
    <button>Buy</button>
  </div>
</div>

赞(0）回复(0）举报 2023-02-06

z3yyvxxp3#

您可以在列div上使用内联样式margin-top:auto，如下所示：

<div class="column is-one-fifth" style="margin-top: auto;">
        <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>

或者，最好将其作为自定义样式添加到. css中，并将其作为内联类使用。
.中央统计局：

.valignbottom{
    margin-top: auto;
}

网页：

<div class="column is-one-fifth valignbottom">
        <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>

赞(0）回复(0）举报 2023-02-06

我来回答

css 列底部的“Bulma对齐”按钮

3条答案

相关问题

热门标签

最新问答