列中大小相同的卡片

Question

我面临类似的问题，如此处所述：我想将 3-6 张卡片彼此相邻放置，并且希望它们具有相同的宽度和高度。我在列中添加了

is-flex

选项，但这会篡改列的宽度（但确实适用于高度）。我还想确保“立即订购”按钮保留在底部。

我将所有内容都打包在代码中：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet" />

<div class="columns ml-1 mt-3">
  <div class="column is-3">
    <div class="card has-background-warning-light">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          regular price
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-warning">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    450 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content">
        <div class="content">
          <p class="title is-3" style="display: flex;">
            standard price available for everyone
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-3">
    <div class="card has-background-danger-light">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          for early birds
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-danger">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    350 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content">
        <div class="content">
          <p class="title is-3" style="display: flex;">
            very long text that showas thet the items becomes mostly taller than the other ones.
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-3">
    <div class="card has-background-info-light">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          reduced
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-info">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    250 €
                                </span>
          </div>
        </div>
      </div>
      <div class="card-content">

        <div class="content">
          <p class="title is-3" style="display: flex;">
            only until ...
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-3">
    <div class="card">
      <div class="card-header has-background-primary-light">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          green price
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-primary">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    180 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content">

        <div class="content">
          <p class="title is-3">
            the reason
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold mt-auto">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>
</div>

我有：

如何实现所有卡片的高度和宽度相同，订单按钮位于底部？我找到了定义

min-height: 10rem;

的解决方法，但如果可能的话，我不想使用固定大小。

Answer 1

我添加了一些CSS，希望这是您正在寻找的：

.column {
  display: flex!important;
  flex-direction: column;
}

.card,
.card-content,
.card-content .content {
  flex: auto;
  display: flex;
  flex-direction: column;
}

.card .button {
  margin-top:auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/>

<div class="columns ml-1 mt-3">
  <div class="column is-3">
    <div class="card has-background-warning-light">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          regular price
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-warning">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    450 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content">
        <div class="content">
          <p class="title is-3" style="display: flex;">
            standard price available for everyone
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-3">
    <div class="card has-background-danger-light">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          for early birds
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-danger">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    350 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content">
        <div class="content">
          <p class="title is-3" style="display: flex;">
            very long text that showas thet the items becomes mostly taller than the other ones.
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-3">
    <div class="card has-background-info-light">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          reduced
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-info">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    250 €
                                </span>
          </div>
        </div>
      </div>
      <div class="card-content">

        <div class="content">
          <p class="title is-3" style="display: flex;">
            only until ...
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-3">
    <div class="card">
      <div class="card-header has-background-primary-light">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          green price
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-primary">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    180 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content">

        <div class="content">
          <p class="title is-3">
            the reason
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold mt-auto">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>
</div>