Div 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 包含两个较小的。第一个应该在顶部，第二个在底部。顶部效果很好，但对于第二个 div 我无法将其置于较大 div 的底部...我应该使用什么？

Answer 1

您可以在第二个 DIV 上使用 position: absolute;，在 wrapper/parent 上使用 position: relative;，位置设置如下所示。

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%;
  }

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

Answer 2

你真正想要达到的目标是什么

您需要能够始终控制您的 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 没有定义它自己的 space 你不知道底部是什么。所以你可以添加 clear 属性来确保你放在 div 2 上面的任何东西都被清除。

祝你好运

Answer 3

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

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

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

Div div 底部

Div bottom of div

html

css

division