如何对齐框项目以便按钮[重复]

Posted 2023-03-05

【中文标题】如何对齐框项目以便按钮[重复]

【英文标题】：How to align box items so buttons [duplicate]

【发布时间】：2021-11-12 04:37:14

【问题描述】：

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

【参考方案1】：

如果您在卡片上设置 display: flex，然后将魔术 margin-top: auto 添加到您的按钮，您可以实现此目的。

我重新创建了您的代码：

.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>

【参考方案2】：

也许使用flex-box 并将flex-end 样式设置为您的button 并将flex-start 设置为您的text 会帮助您。