用于对齐图像和文本的 CSS 网格或 flexbox答案

【问题标题】：CSS grid or flexbox for aligning image and text用于对齐图像和文本的 CSS 网格或 flexbox
【发布时间】：2017-09-20 21:24:14
【问题描述】：

我想确保列中的图像和文本与图像底部和文本顶部对齐。有没有人知道如何在不明确将.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>

【问题讨论】：

一个弹性容器的子容器与另一个弹性容器的子容器没有关联。因此，使用纯 CSS 不可能让这些“表亲”统一对齐。您可以更改您的 HTML 以使这些元素成为兄弟，然后它们可以相互关联。
谢谢，我就是这么想的。但是图像和文本是相互关联的。所以将它们分开并不是一个真正的选择。
在我看来，这是您可以使用QML 等面向 GUI 的语言轻松实现的事情，但它不适合网页上下文。

标签： html css flexbox css-grid

【解决方案1】：

Align-items: baseline 在 flexbox 容器上似乎在这种情况下可以解决问题。在此处查看解决方案：https://codepen.io/simoncoudeville/pen/yzOvmN?editors=1100

【讨论】：

【解决方案2】：

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

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

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

这是JSFiddle中的一个例子

【讨论】：

谢谢，但这也可以在没有表格的情况下完成。问题是我不希望图像和文本分开，因为它们是同一篇文章的一部分。虽然这看起来像是答案，但实际上并非如此。

【解决方案3】：

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

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

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

【讨论】：

这是一个巧妙的技巧。但是.c-grid__content 实际上的高度为 0。因此，如果您在具有多行的网格中使用它，事情就会开始重叠。正如你在这里看到的：codepen.io/simoncoudeville/pen/yzOvmN?editors=1100.