将项目对齐到容器底部

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>