CSS 用于对齐图像和文本的网格或弹性框

Question

我想确保列中的图像和文本与图像底部和文本顶部对齐。有谁知道如何在不明确将 .c-grid__content 的高度设置为 200px 的情况下实现这一点？

现在我正在使用 flexbox。也许 css-grid 是答案？

请看一下这个代码笔：https://codepen.io/simoncoudeville/pen/VMZmVa?editors=1100#0。

p {
  margin-bottom: 10px;
  font-family: sans-serif;
}

img {
  max-width: 100%;
  margin-bottom: 10px;
}

.c-grid {
  padding: 40px 20px;
  display: flex;
}

.c-grid__item {
  flex-basis: 100%;
  margin: 0 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-end;
}

.c-grid__picture {
  width: 100%;
}

.c-grid__content {
  display: flex;
  flex-direction: column;
}

<div class="c-grid">
  <article class="c-grid__item">
    <div class="c-grid__picture">
      <img src="http://via.placeholder.com/400x200">      
    </div>
    <div class="c-grid__content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto!</p>
    </div>  
  </article>
  <article class="c-grid__item">
    <div class="c-grid__picture">
      <img src="http://via.placeholder.com/400x600">       
    </div>
    <div class="c-grid__content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto! Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>  
  </article>
  <article class="c-grid__item">
    <div class="c-grid__picture">
      <img src="http://via.placeholder.com/400x400">       
    </div>
    <div class="c-grid__content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto! </p>
    </div>  
  </article>
</div>

Answer 1

查看您的代码笔，这似乎不需要响应式设计。如果我的假设是正确的，为什么不使用 table 按行分隔图像和文本，垂直对齐底部的顶行和顶部的底行？

它会将重要的 CSS 限制为几行：

.c-grid__picture {
  vertical-align: baseline;
}
.c-grid__content {
  vertical-align: top;
}

这里有一个例子 JSFiddle

Answer 2

我能够将 .c-grid__content 的 flex-basis 设置为 0。

.c-grid__content {
  ...
  flex-basis: 0;
}

https://codepen.io/antibland/pen/WZrXpw?editors=1100

Answer 3

在这种情况下，flexbox 容器上的

Align-items: baseline 似乎可以解决问题。在此处查看解决方案：https://codepen.io/simoncoudeville/pen/yzOvmN?editors=1100

CSS 用于对齐图像和文本的网格或弹性框

CSS grid or flexbox for aligning image and text

html

css

flexbox

css-grid