无法让对象在div的底部对齐
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法让对象在div的底部对齐相关的知识,希望对你有一定的参考价值。
我想要显示一排五个图像,在底部以不同的比例对齐。我有尺寸可以工作,但由于某种原因,我试图让他们坐在底部的一切都行不通。缩放是正确的,但我不能让它们坐在底部。我试过漂浮,垂直对齐,位置,底部:0px ......难倒......我需要在另一个div中包裹吗?
谢谢你的帮助!
<html>
<style>
.photos {
width: 100%;
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
height: 500px;
float: bottom;
}
.one {
width: 40% !important;
height: auto !important;
object-fit: fill;
float: bottom;
}
.two {
width: 70% !important;
height: 500px !important;
object-fit: scale-down;
}
.four {
width: 65% !important;
height: 500px !important;
object-fit: scale-down;
}
.six {
width: 95% !important;
height: 500px !important;
object-fit: scale-down;
}
.eight {
width: 95% !important;
height: 500px !important;
object-fit: scale-down;
}
</style>
<div class="photos">
<img class="one" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/One_10_editors_award_e72e0a9f-af53-4d5a-a7ff-ad43529a292e.PNG?16373459996811127802">
<img class ="two" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/TWO-10-500sq.png?16128425807283382807">
<img class="four" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/FOUR-10-800-colour-corrected-800.png?161284258072833828077">
<img class="six" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/Six_main_WEB.jpg?16128425807283382807">
<img class="eight" align="botoom" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/EIGHT-10.png?16128425807283382807">
</div>
答案
我认为一个好的css属性适合你的情况是使用display:flex属性。
将.photo类设置为Flex容器,如下所示:
.photo { display: flex; }
然后在.photo类中添加一个align属性,以设置与其所有直接子项的对齐:
.photo { align-items: flex-end ; }
或者,如果要在每个类上单独添加,请使用css属性align-self
.one{ align-self: flex-end; }
.two{ align-self: flex-end; }
...等等
更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
以上是关于无法让对象在div的底部对齐的主要内容,如果未能解决你的问题,请参考以下文章