Question

我有一组卡片都放在一个弹性容器中，以便它们伸展到相同的高度。如何使卡片__内容拉伸剩余的高度，以便日期位于卡片的底部？我尝试添加高度：100％;什么也没做。怎么会这样我不明白什么？

HTML和CSS下方

<div class="wrapper">
    <article class="card">
        <a class="card-link" href="www.test.com">
           <img class="card__image" src="card-image.jpg" />
          <div class="card__content">
            <h2 class="h5">This is a news</h2>
            <small class="card__date">30 May 2019</small> 
          </div>
        </a>
    </article>
    <article class="card">
        <a class="card-link" href="www.test.com">
           <img class="card__image" src="card-image.jpg" />
          <div class="card__content">
            <h2 class="h5">This is another news</h2>
            <small class="card__date">30 May 2019</small> 
          </div>
        </a>
    </article>
    <article class="card">
        <a class="card-link" href="www.test.com">
           <img class="card__image" src="card-image.jpg" />
          <div class="card__content">
            <h2 class="h5">This is another news with a very long title</h2>
            <small class="card__date">30 May 2019</small> 
          </div>
        </a>
    </article>
    <article class="card">
        <a class="card-link" href="www.test.com">
            <img class="card__image" src="card-image.jpg" />
            <div class="card__content">
                <h2 class="h5">This is a another news with a really long heading</h2>
                <small class="card__date">30 May 2019</small> 
            </div>
        </a>
    </article>
</div>

CSS

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.card {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    min-height: 100%;
}

.card-link {
    display: inline-block;
    min-width: 100%;
    min-height: 100%;
    margin-right: 1rem;
}

.card__content {
    position: relative;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: white;
    height: 100%;
}

.card__image {
    background: purple;
    min-width: 100%;
    position: relative;
}


.card__date {
    margin-top: auto;
}

此处指向码本的链接

https://codepen.io/anon/pen/KjBGrd#anon-login

Answer 1

只需继续在包装物品上使用flexbox并根据需要扩展其子项即可。

class Program
{
    const string AppUniqueGuid = "9da112cb-a929-4c50-be53-79f31b2135ca";

    [STAThread]
    static void Main(string[] args)
    {
        using (System.Threading.Mutex mutex
            = new System.Threading.Mutex(false, AppUniqueGuid))
        {
            if (mutex.WaitOne(0, false))
            {
                App application = new App();
                application.InitializeComponent();
                application.Run();
            }
            else
            {
                MessageBox.Show("Instance already running!");
            }
        }
    }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.wrapper {
  display: flex;
}

.card {
  width: 30%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid red;
  
  display: flex;
  flex-direction: column;
}

.card-link {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card__content {
  padding: 2rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.card__image {
  display: block;
  background: purple;
  height: 100px;
}

.card__date {
  margin-top: auto;
}

Answer 2

无论文字大小如何，我都将日期位置更改为绝对位置，以使其始终位于卡片底部。

.wrapper {
  display: flex;
}

.card {
  width: 30%;
  box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
  min-height: 100%;
  position: relative;
}

.card-link {
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
}

.card__content {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.card__image {
  display: inline-block;
  background: purple;
  min-width: 100%;
  position: relative;
  height: 100px;
}

.card__date {
  margin-top: auto;
  position: absolute;
  bottom: 20px;
}

<div class="wrapper">
  <article class="card">
    <a class="card-link" href="www.test.com">
      <img class="card__image" src="card-image.jpg" />
      <div class="card__content">
        <h2 class="h5">This is a news</h2>
        <small class="card__date">30 May 2019</small>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="www.test.com">
      <img class="card__image" src="card-image.jpg" />
      <div class="card__content">
        <h2 class="h5">This is another news</h2>
        <small class="card__date">30 May 2019</small>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="www.test.com">
      <img class="card__image" src="card-image.jpg" />
      <div class="card__content">
        <h2 class="h5">This is a another news with a really long heading</h2>
        <small class="card__date">30 May 2019</small>
      </div>
    </a>
  </article>
</div>

如何在弹性商品中获取商品以拉伸父商品的100％？

2 个答案: