Question

我尝试将我的框设置为div的底部，但是即使我设置了bottom：0px，它也显示在div的顶部；

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

:match Visual /\%'<\_.*\%'>\_./

  <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>

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>

Answer 2

bottom属性对静态定位的元素无效（元素默认为position: static）

您需要在容器上设置position: relative，在position: absolute上设置.box才能看到该属性。

Answer 3

您可以尝试-

 <div class="container">
    <div class="bottom0">

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

并添加位置：绝对在bottom0 css中

 .bottom0{
  bottom: 0px;
  position: absolute;
}

显示框位于div的底部而不是div的顶部

3 个答案: