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

Question

我有 4 列产品，下面有 header、描述和图片，我希望文本区域位于顶部，每行的图像位于底部，这样它们在屏幕显示时保持对齐已调整大小。

目前，图像随着文字的环绕而上下移动 - 这看起来非常凌乱，因为它们各自有不同数量的文字。

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

这是我的代码：

#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>

Answer 1

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

这在很多 relative/absolute 组合失败的情况下救了我。

更具体地说；

    .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)。

如果您遇到困难，请查看 link - 我认为它有很好的文档记录！祝你好运。

Answer 2

你可以为此使用 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>

Answer 3

希望对您有所帮助，

使用 flex 被认为是最佳实践。 table 和 table-cell 是旧方法，因为我们已经走了很远，而且每天都在发明新的属性。因为使用 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>

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

Keep text aligned top and image aligned to the bottom of relative height divs

css

alignment

vertical-alignment