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

时间：2017-08-31 09:27:03

标签： css alignment vertical-alignment

我有4列产品，下面有标题，说明和图片，我希望文本区域位于顶部，图像每行都在底部排列，以便在调整屏幕大小时保持对齐。

此时图片随着文字的包装而上下移动 - 看起来非常不整洁，因为每个图片都有不同的文字数量。

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

这是我的代码：

＆＃13;
＆＃13; 
#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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

您可以将flexbox用于此

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果可以，我会评论这个;你尝试过使用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）和bottom（flex-end）。

如果您遇到困难，请查看链接 - 我认为它的记录非常好！祝你好运。

答案 2 :(得分：0)

希望这可以帮到你，

使用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>

相关问题
最新问题