保持文本顶部对齐，图像与相对高度 div 的底部对齐答案

【问题标题】：Keep text aligned top and image aligned to the bottom of relative height divs保持文本顶部对齐，图像与相对高度 div 的底部对齐
【发布时间】：2018-02-09 04:51:27
【问题描述】：

我有 4 列产品，下面有标题、描述和图像，我希望文本区域位于顶部，图像位于底部的每一行，以便在调整屏幕大小时它们保持对齐。

目前图像会随着文本的换行而上下移动 - 这看起来非常不整洁，因为它们每个都有不同数量的文本。

我尝试过使用表格和绝对位置，但它们都会导致问题并且无法正常工作。

这是我的代码：

#product-landing .landing-row {
  position: relative;
  height: inherit;
}

.product-landing,
.product-landing-2,
.product-landing-3 {
  margin-right: 2.0533%;
}

.product-landing,
.product-landing-2,
.product-landing-3,
.product-landing-4 {
  margin-left: 0px;
  display: inline-block;
  position: relative;
  height: 100%;
  vertical-align: top;
  width: 22.978%;
}

.product-landing-4 {
  margin-right: 0px;
}

#product-landing p {
  margin-top: 0px;
  margin-bottom: 5px;
  clear: both;
  width: 100%;
}

.product-landing .land-image {
  vertical-align: bottom;
}

.product-landing img,
.product-landing-2 img,
.product-landing-3 img,
.product-landing-4 img {
  margin-top: 10px;
  display: block;
  max-width: 350px;
  margin: 0 auto;
  bottom: 0px;
  width: 100%;
}

<div id="product-landing">
  <div class="landing-row">
    <div class="product-landing">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product1</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image1.jpg"></a>
      </p>
    </div>
    <div class="product-landing-2">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product2</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image2.jpg"></a>
      </p>
    </div>
    <div class="product-landing-3">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product3</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image3.jpg"></a>
      </p>
    </div>
    <div class="product-landing-4">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product4</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image4.jpg"></a>
      </p>
    </div>
  </div>
</div>

【问题讨论】：

标签： css alignment vertical-alignment

【解决方案1】：

您可以为此使用 flexbox

#product-landing .landing-row {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  flex-wrap:wrap;
}

#product-landing p {
  margin-top: 0px;
  margin-bottom: 5px;
}

.product-landing {
  display:flex;
  flex-direction:column;
  width: 22.978%;
}

.product-landing img {
  margin-top: 10px;
  display: block;
  max-width: 350px;
  width: 100%;
}

.product-text {
  flex-grow:1;
}

<div id="product-landing">
  <div class="landing-row">
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product1</a></div>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product2</a></div>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product2</a></div>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product3</a></div>
        <p><b><i>Product description Product description Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product4</a></div>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
  </div>

【讨论】：

不。一旦文本在其中一列上换行（调整屏幕大小时），图像就会失去对齐。它们仍然与文本底部对齐，而不是与产品着陆框对齐。
@LouiseW 您使用的是什么浏览器 - 这在边缘运行良好，即 chrome 和 firefox - 您是说它在您的代码中不起作用还是上面的代码不起作用我运行 sn-p 并使用整页并调整屏幕大小，图像始终保持对齐。您可能会注意到，我已将您的无效 ID（ID 必须是唯一的）更改为类，并将您奇怪的 ID（例如类）更改为使用一个类。 sn-p 显然有效，因此它必须在您的代码中
是的，我已将 id 更改为类，就像您在代码中所做的那样。我正在使用最新版本的 Chrome 和 Firefox。我还检查了 safari、yandex、opera 和 IE 10 及更早版本的浏览器，它也是如此。请记住，描述文本比此处显示的要多得多，它在 1 到 4 行之间变化。
您能否为您的新代码创建一个fiddle，以便我可以清楚地看到您所做的事情，因为上述内容在所有浏览器中都有效（除了可能存在弹性问题的 safari）
我在这里做了小提琴（我希望这是对的）：jsfiddle.net/louiseW/ozjkzr7k

【解决方案2】：

如果可以的话，我会对此发表评论；你试过使用 flex-box 吗？
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这在许多相对/绝对组合失败的情况下救了我。

更具体一点；

    .wrapper{
        display:flex;
        flex-direction:column;
    }
    .text-wrapper-div{
        align-self:flex-start;
    }
    .image-wrapper-div{
        align-self:flex-end;
    }

.wrapper 是你的父容器，它从上到下（列）弯曲。里面是文本和图像的两个 div，它们与顶部（flex-start）和底部（flex-end）对齐。

如果您遇到问题，请查看该链接 - 我认为它的文档非常详细！祝你好运。

【讨论】：

是的，我仍然无法使用此方法对齐图像。此外，它不适用于较旧的浏览器，并且在我对其进行测试时看起来很糟糕。

【解决方案3】：

希望对你有帮助，

使用 flex 被认为是最佳实践。表格和表格单元格是旧的方式，因为我们已经走了很长一段路，并且每天都在发明新的属性。因为使用 flex 会在您调整浏览器大小时调整内容本身，并且具有自己的特性。

#product-landing .landing-row {
display: flex;
flex-direction: row;
}

.product-landing,
.product-landing-2,
.product-landing-3 {
  margin-right: 2.0533%;
}

.product-landing,
.product-landing-2,
.product-landing-3,
.product-landing-4 {
    flex: 1;
  text-align: center;
}


#product-landing p {
  margin-top: 0px;
  margin-bottom: 5px;
  clear: both;
  width: 100%;
}

.product-landing .land-image {
  vertical-align: bottom;
}

.product-landing img,
.product-landing-2 img,
.product-landing-3 img,
.product-landing-4 img {
  margin-top: 10px;
  display: block;
  max-width: 350px;
  margin: 0 auto;
  bottom: 0px;
  width: 100%;
}

<div id="product-landing">
  <div class="landing-row">
    <div class="product-landing">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product1</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image1.jpg"></a>
      </p>
    </div>
    <div class="product-landing-2">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product2</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image2.jpg"></a>
      </p>
    </div>
    <div class="product-landing-3">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product3</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image3.jpg"></a>
      </p>
    </div>
    <div class="product-landing-4">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product4</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image4.jpg"></a>
      </p>
    </div>
  </div>
</div>

【讨论】：