在右下角对齐div div

Question

我如何对齐底部的多个div，一个在另一个上。就像下面的图片一样。

Answer 1

您可以使用Flexbox做到这一点

1. 设置flex-direction: column到位置的div在另一个
2. align-items: flex-end顶一个的div移动到父
的右侧
3. justify-content: flex-end移动divs到父母的底部。

.parent { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
    justify-content: flex-end; 
 

 
} 
 
.box { 
 
    width: 100px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
}

<div class="parent"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

更新：要反转的div的顺序，你可以使用flex-direction: column-reverse和justify-content: flex-start

.parent { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    align-items: flex-end; 
 
    justify-content: flex-start; 
 

 
} 
 
.box { 
 
    width: 100px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
}

<div class="parent"> 
 
    <div class="box">1</div> 
 
    <div class="box">2</div> 
 
    <div class="box">3</div> 
 
</div>

Answer 2

您可以使用Flexbox的使用Flex - 方向：column-reverse;和flex-wrap: wrap-reverse;：

.x { 
 
    width: 500px; 
 
    height: 500px; 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    flex-wrap: wrap-reverse; 
 
    border: 1px solid red; 
 
    flex-grow: 0; 
 
    flex-basis: 0%; 
 
    } 
 
    .y { 
 
    width: 80px; 
 
    height: 80px; 
 
    border: 1px solid green; 
 
    margin: 3px; 
 
    }

<div class="x"> 
 
    <div class="y">1</div> 
 
    <div class="y">2</div> 
 
    <div class="y">3</div> 
 
    <div class="y">4</div> 
 
    <div class="y">5</div> 
 
</div>