html - 图片、标题和文本对齐

Question

我正在尝试对齐三个 div 的内容，以便图像、标题和文本的开头(已更改，因为我不够清楚)水平对齐，并且图像偏移如图所示。我尝试了几种方法(包括将图像包装器设置为固定大小)，但是当我更改浏览器的大小时，它们似乎都无法很好地缩放 - 通常会导致文本和图像之间的间隙大小也发生变化很多，看起来很奇怪。

这是我想要排列的设计:

我要实现的目标:

问题是每个图像的大小都基于其容器的宽度。如果我设置图像包装器高度(蓝色边框)以对齐其下方的文本，则当浏览器变小和/或变大时会出现问题。例如，在较小的浏览器尺寸下，相同的固定包装高度会发生这种情况:

是否有针对此类布局/设计的最佳实践或其他内容？

我创建了一个代码笔来更清楚地显示问题，here

.container {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  top: 15rem;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  border: 1px solid red;
}

.card-image-wrapper {
  border: 1px solid blue;
  transform: translateY(-5rem);
  /*height: 20rem; can use this to align the text, but it doesn't scale well */
}

.wrapper-1 {
  width: 50%;
}

.wrapper-2 {
  width: 25%;
}

.wrapper-3 {
  width: 38%;
}

.card-image {
  width: 100%;
}

<div class="container">
  <div class="card">
    <div class="card-image-wrapper wrapper-1">
      <img src="https://cdn.inquisitr.com/wp-content/uploads/2016/08/Zombieland-Writers-Explain-How-They-Secured-Bill-Murray-For-That-Legendary-Cameo3-670x388.jpg" class="card-image">
    </div>
    <div class="card-heading">Heading</div>
    <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque neque quisquam omnis incidunt laborum delectus deleniti, aliquid magnam, sit, autem eos perferendis saepe iure aut provident minus molestiae similique! Eveniet debitis accusamus,
      rerum illo dicta at atque quidem, ratione laboriosam doloribus, tempore optio nostrum vel sit. Fuga ipsam beatae doloremque.</div>
  </div>

  <div class="card">
    <div class="card-image-wrapper wrapper-2">
      <img src="https://d919ce141ef35c47fc40-b9166a60eccf0f83d2d9c63fa65b9129.ssl.cf5.rackcdn.com/images/76053.max-620x600.jpg" class="card-image">
    </div>
    <div class="card-heading">Heading</div>
    <div class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta, ullam accusantium deserunt optio laborum nobis voluptates dolorem maxime ad omnis dolorum. Nisi esse maiores necessitatibus omnis voluptatem repudiandae obcaecati maxime dolores, cumque
      quod pariatur magni sunt incidunt rem voluptatum commodi laborum odio vel? Quisquam culpa a praesentium eligendi aut totam commodi ab eius quis, eos, animi, amet minus debitis unde.</div>
  </div>

  <div class="card">
    <div class="card-image-wrapper wrapper-3">
      <img src="https://d2npu017ljjude.cloudfront.net/images/regular-43/w735/92783-11.jpg" class="card-image">
    </div>
    <div class="card-heading">Heading</div>
    <div class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id molestias distinctio recusandae impedit iste ipsum, mollitia non laudantium incidunt saepe omnis error natus exercitationem alias quas in, nobis sed aliquam minima adipisci amet magnam.
      Perferendis nostrum, dicta consequatur odit aliquid placeat sequi porro fuga enim?</div>
  </div>
</div>

编辑:为了清楚起见，我试图让标题和文本水平对齐。我会尽快添加第二张图片

Answer 1

给你:https://codepen.io/anon/pen/jvwVor

位置.card-image-wrapper在页面顶部，基本为0高度。将其他所有内容放在底部。然后将 img 置于 .card-image-wrapper 中。

 display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  min-height: 25rem;
  border: 1px solid red;
}

.card-image-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid blue;
  height: 1px;
}

.card-heading {
  margin-top: 15rem;
}

这是假设您的照片没有高得离谱。如果您希望所有 3 个对齐，您必须确保图片短于特定高度。否则，您将必须通过 JavaScript 确定上边距。