您的位置: 首页  >  技术问答  >  保持文本对齐的顶部和图像对齐的相对高度div的底部

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

分类: 技术问答 • 2022-08-05 20:14:31
问题描述：

我有4列产品的头部，描述和图像在下面，我希望文本区域在顶部和图像到每个排队在底部，以便在屏幕调整大小时保持对齐。保持文本对齐的顶部和图像对齐的相对高度div的底部

当图像在文字环绕时上下移动 - 看起来非常不整齐，因为它们每个都有不同的文字量。

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

这里是我的代码：

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

答

您可以使用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>

+0

没有。只要文本包装在其中一列（当屏幕被调整大小时），图像就不会对齐。他们仍然对齐文本的底部而不是产品登陆框。 – LouiseW

+0

@LouiseW你使用的是什么浏览器 - 这种方式在边缘即罚款，即铬和火狐 - 你是说它不能在你的代码中工作，或者上面的代码不工作，因为当我运行代码段并使用整页并调整屏幕大小，图像始终保持对齐。您可能会注意到我已将您的无效ID（ID必须是唯一的）更改为类，并将类似于类的奇怪ID更改为使用一个类。这段代码很明显，所以它必须是代码中的东西 – Pete

+0

是的，我已经像在代码中一样将id更改为类。我正在使用最新版本的Chrome和Firefox。我还检查了safari，yandex，opera和IE 10以及更旧的浏览器，它也是如此。请记住，这里显示的描述文字比这里显示的要多得多，它在1到4行之间变化。 – LouiseW

答

想如果我可以过评论这一点;你有没有试过使用柔性盒？
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）。

看看链接，如果你卡住了 - 这是非常好的文件，我想！祝你好运。

+0

是的，我还是没能得到图像使用这种方法保持一致。它也不适用于旧版浏览器，并且在我测试它时看起来很糟糕。 – LouiseW

答

希望这可以帮助你，

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

相关推荐