沃梦达 / 编程问答 / 前端问题 / 正文

如何对齐框项以使按钮

沃梦达教程前端问题

2022-09-07

How to align box items so buttons(如何对齐框项以使按钮)

本文介绍了如何对齐框项以使按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要对齐按钮，但2行文本使其与1行文本不同。有人能帮帮我吗？

推荐答案

如果在卡片上设置Display：Flex，然后将魔法margin-top: auto添加到按钮，则可以实现此目的。

我重新创建了您的代码：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4em;
  width: 100%;
}

article{
  display: flex;
  flex-direction: column;
  background: lightgray;
  padding: 1em;
  min-width: 200px;
  max-width: 200px;
}
button{
  margin-top: auto; /* the magic */
}

 <div class="container">
    <article>
      <h2>title title title title title title title</h2>
      <button>Button</button>
   </article>
   <article>
      <h2>title</h2>
      <button>Button</button>
   </article>
   <article>
      <h2>title</h2>
      <button>Button</button>
   </article>
   <article>
      <h2>title</h2>
      <button>Button</button>
   </article>
</div>

这篇关于如何对齐框项以使按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：如何对齐框项以使按钮

上一篇：通过css将页眉标签与固定高度垂直对齐

下一篇：通过字符串键/路径生成嵌套的对象结构