Div的底部

Question

div.div1 {
  border: 1px solid red;
  height: 100px;
}
div.div2 {
  border: 1px solid yellow;
}

<div class = "div1">
  <div class = "div2">Test1</div>
  <div class = "div2">Test2</div>
</div>

我使用上面的代码使一个大div包含两个smaller。第一个应位于顶部，第二个应位于底部。顶部部分效果很好但是对于第二部分我不能让它在更大的div的底部...我应该使用什么？

Answer 1

您可以将父级设为column，并使用justify-content: space-between分隔子级。

＆＃13;

＆＃13;

div.div1 {
  border: 1px solid red;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
div.div2 {
  border: 1px solid yellow;
}

＆＃13;

<div class = "div1">
  <div class = "div2">Test1</div>
  <div class = "div2">Test2</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在第二个DIV上使用position: absolute;，并在包装​​器/父级和位置设置上使用position: relative;，如下所示。

＆＃13;

＆＃13;

div.div1 {
  border: 1px solid red;
  height: 100px;
  position: relative;
}
div.div2 {
  border: 1px solid yellow;
}
div.div2:nth-child(2) {
  position: absolute;
  bottom: 0;
  width: 100%;
  }

＆＃13;

<div class = "div1">
  <div class = "div2">Test1</div>
  <div class = "div2">Test2</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你真正想要实现的目标

你需要能够始终控制你的div，所以要确保你总是更好地定义它们

div.div1 {
 border: 1px solid red;
 height: 100px;
}
div.div2 {
 border: 1px solid yellow;
 width:100px; 
min-height: 10 px;
float:left;
}

<div class = "div1">
  <div class = "div2">Test1</div>
  <div class = "div2">Test2</div>
</div>

因为你的div没有定义自己的空间你不知道底部是什么。所以你可以添加clear属性以确保你在div 2上面放置的任何内容都被清除。

祝你好运