div上面的div（底部：0px;）

Question

我想对齐div中的元素

a - ＆gt;到顶部

b - ＆gt;到底部

c - ＆gt;在b元素之上（但也在div容器的底部）

#container {    position: relative}
#a {    position: absolute;    top: 0px;}
#b {    position: absolute;    bottom: 0px;}
#C {????}

我找不到C

的方法

Answer 1

您可以在div下面使用另一个容器。

<div id="container">
   <div id="a"></div>
   <div id="container-below">
      <div id="b"></div>
      <div id="c"></div>
   </div>
</div>

#container {    position: relative}
#a {    position: absolute;    top: 0px;}
#container-below {    position: absolute;    bottom: 0px;}

Answer 2

您可以将c置于b内并使用bottom: 100%绝对定位，因此c始终位于b之上。

.d {
  position: relative;
  height: 200px;
  width: 200px;
  float: left;
  margin: 0 5px;
  border: 1px solid green;
}
.a, .b, .c{
  position: absolute;
  width: 100%;
  min-height: 40px;
  left: 0;
}
.a {
  top: 0;
  background: lightgreen;
}
.b {
  bottom: 0;
  background: tomato;
}
.c {
  bottom: 100%;
  background: orange;
}

<div class="d">
  <div class="a">a
  </div>
  <div class="b">b
  <div class="c">c
  </div>
  </div>
</div>
<div class="d">
  <div class="a">a
  </div>
  <div class="b"> Block b Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsu
  <div class="c">c
  </div>
  </div>
</div>

Answer 3

请开始使用flexbox并尽快使用css网格：P

＆＃13;

＆＃13;

.p > div {
  width: 100px;
  height: 100px;
  border: 1px solid red
}

.p {
  height: 500px;
  display: flex;
  background-color: beige;
  width: 200px;
  flex-direction: column;
}

.b {
  margin-top: auto;
}

＆＃13;

<div class="p">

  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

＆＃13;

＆＃13;

＆＃13;