html - 在div底部而不是div顶部显示框

Question

我尝试将我的框设置到 div 的底部，但它出现在 div 的顶部，即使我设置了 bottom:0px;

这是我的代码的链接:js fiddle

  <div class="container">
    <p class="box bottom0" style="background-color:grey">Category1</p>
    <p class="box bottom0" style="background-color:red">Category2</p>
    <p class="box bottom0" style="background-color:blue">Category3</p>    
  </div>

 margin: 0 auto; height: 500px;
 }
 .bottom0{
  bottom: 0px;
}
.box{
  font-size: 15px;
  color: white;
  text-align: center;
  padding: 10px;
  margin-bottom: 0px;
  margin-right: 30px;
  width: auto;
  height: auto;
  float: left;
  display:inline-block;
}

Answer 1

你可以在容器上使用flex

.container {
  display: flex;
  align-items: flex-end;
}

或

.container {
  display: flex;
}

.bottom0{
  align-self: flex-end;
}

---

 .container { 
 width: 960px; 
 margin: 0 auto;
 height: 500px;
display: flex;
 }
 .bottom0{
  align-self: flex-end;
}
.box{
  font-size: 15px;
  color: white;
  text-align: center;
  padding: 10px;
  margin-bottom: 0px;
  margin-right: 30px;
  width: auto;
  height: auto;
  float: left;
  display:inline-block;
  
}
 

  <div class="container">
    <p class="box bottom0" style="background-color:grey">Category1</p>
    <p class="box bottom0" style="background-color:red">Category2</p>
    <p class="box bottom0" style="background-color:blue">Category3</p>    
  </div>