将项目对齐到容器的底部

Question

我想将项目垂直对齐到容器的底部。困难来自.container左移，我到目前为止找不到解决方案。

.container {
  width: 40px;
  height: 250px;
  background: #aaa;
  float: left; /* cannot be removed */
}
.item {
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 50%;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

如果你总是有4件物品而且一切都有固定的高度，你可以简单地做数学并在第一件物品上设置一些上边距：

.item:first-child {
  margin-top: 90px; /* 250-40x40 */
}

您也可以使用flexbox：

.container {
  width: 40px;
  height: 250px;
  background: #aaa;
  float: left;
  /* new */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.item {
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 50%;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>