如何将卡片内的按钮与不同的内容对齐

Question

我还在学习 CSS 和 HTML。如果这是一个愚蠢的问题，请原谅我。 请在下面查看我的代码。我需要帮助对齐两张卡片上的蓝色按钮。无论内容大小如何，它都应该位于卡片的底部（类似对齐）。 请指教。

.row {
  display: flex;
  /* equal height of the children */
}

.col1 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  margin: 0 40px 0 0;
  padding: 0 0 10px 0;
}

.col2 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  padding: 0 0 10px 0;
}

.card-header {
  background: rgba(242, 242, 242, 1);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 31px 10px 31px 15px;
}

.card-header-bg {
  height: 7px;
}

.card-container {
  padding: 2px 14px;
}

.blue-button,
a.blue-button {
  background-color: #026fc2;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 1px #454545;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
}

<div class="row">
  <div class="col1">
    <div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>Test Example</p>

      <ul>
        <li>test1</li>

        <li>test2</li>

        <li>test3</li>

        <li>test4</li>
      </ul>

      <p>Minor updates.</p>

      <ul>
        <li>test</li>

        <li>Test</li>
      </ul>

      <p><a href=".html" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Go Here</a></p>
    </div>
  </div>

  <div class="col2">
    <div class="card-header-bg" style=" background-color: #7ECEFD;"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>test123/p>

        <ul>
          <li>abc</li>

          <li>def</li>

          <li>ghi</li>
        </ul>

        <p>test test test.</p>

        <ul>
          <li>Learn about testing</li>
        </ul>

        <p><a href="" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Second Test</a></p>
    </div>
  </div>
</div>

Answer 1

不是一个愚蠢的问题。它们似乎未对齐，因为左侧有更多 li。按钮默认定位在statically，所以如果内容比较多，就会往下推。您会注意到，如果您在右侧添加更多li，按钮将被按下并看起来对齐。您可能会发现将buttons 嵌套在自己的divs 中会给您更多的控制权。

但是，您可以通过在较高位置的按钮上添加<br> 或line-break element 来使用当前结构轻松解决此问题。见下文。

.row {
  display: flex;
  /* equal height of the children */
}

.col1 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  margin: 0 40px 0 0;
  padding: 0 0 10px 0;
}

.col2 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  padding: 0 0 10px 0;
}

.card-header {
  background: rgba(242, 242, 242, 1);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 31px 10px 31px 15px;
}

.card-header-bg {
  height: 7px;
}

.card-container {
  padding: 2px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blue-button,
a.blue-button {
  background-color: #026fc2;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 1px #454545;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
}

.btn-primary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
}

.card-container>div {
  height: 210px;
}

<div class="row">
  <div class="col1">
    <div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <div>
        <p>Test Example</p>

        <ul>
          <li>test1</li>

          <li>test2</li>

          <li>test3</li>

          <li>test4</li>
        </ul>

        <p>Minor updates.</p>

        <ul>
          <li>test</li>

          <li>Test</li>
        </ul>
      </div>
    </div>
    <div class="btn-primary">
      <a href=".html" class="blue-button" role="button">Go Here</a>
    </div>
  </div>

  <div class="col2">
    <div class="card-header-bg" style=" background-color: #7ECEFD;"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <div>
        <p>test123</p>

        <ul>
          <li>abc</li>

          <li>def</li>

          <li>ghi</li>
        </ul>

        <p>test test test.</p>

        <ul>
          <li>Learn about testing</li>
        </ul>
      </div>
    </div>
    <div class="btn-primary">
      <a href="" class="blue-button" role="button">Second Test</a>
    </div>
  </div>

默认最大渲染高度 ~ 为两个 div 创建高度。