无法让对象在 div 底部对齐答案

【问题标题】：Can't get objects to align at the bottom of divs无法让对象在 div 底部对齐
【发布时间】：2018-10-11 03:52:02
【问题描述】：

我正在尝试显示一行五张图片，并以不同的比例在底部对齐。我的尺寸可以工作，但由于某种原因，我试图让它们坐在底部的一切都行不通。缩放比例是正确的，但我就是不能让它们坐在底部。我试过浮动，垂直对齐，位置，底部：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>

【问题讨论】：

没有float:bottom这样的属性值。这应该是什么样子？

标签： html css alignment

【解决方案1】：

我认为非常适合您的情况的一个好的 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; }

...等

【讨论】：