html - 将物品对准容器的底部

我想将项目垂直对齐到容器的底部。困难来自.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>

最佳答案

如果您始终有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>

关于html - 将物品对准容器的底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36386401/