将第三个水平div放在其他div的底部？

Question

编辑：问题已经解决，感谢所有帮助过的人！

原帖：
所以我试图将三个div彼此相邻（直到目前为止这部分已经成功），第三个和最后一个div喜欢去附加到div的底部，我不知道如何做到这一点。

如何将第三个div添加到中间div的底部并保留在容器内？

为了告诉你，我做了一个简单的例子。像这样：

图像中的黑色是“身体”。 灰色是一个容器div我放入其他三个div。 每个其他框表示一个div，我想要他们做什么以及约。我希望他们能够彼此定位。

我希望只能使用html和css来完成。我将不胜感激任何帮助。

到目前为止，我将此作为div的html：

#nav,
#textarea,
#contactallpages {
  vertical-align: top;
  display: inline-block;
  *display: inline;
}
#containerpage {
  position: relative;
  margin: auto;
  padding-top: 5%;
  padding-bottom: 5%;
  background-color: black;
  height: 100%;
  width: 70%;
}
#centercontainer {
  background-color: lightblue;
  width: 75%;
  margin: 0 auto;
  padding: 2%;
}
#nav {
  float: left;
  background: #aaaaaa;
  height: 50%;
  width: 15%;
  padding: 1%;
}
#textarea {
  display: inline-block;
  background: #cccccc;
  height: 70%;
  width: 64%;
  padding: 1%;
}
#contactallpages {
  background: #bbbbbb;
  position: absolute;
  width: 15%;
  padding: 1%;
  bottom: 0;
}

<div id="containerpage">
  <div id="centercontainer">
    <div id="nav">
      <ul><a href="#">1</a>
      </ul>
      <ul><a href="#">2</a>
      </ul>
      <ul><a href="#">3</a>
      </ul>
    </div>

    <div id="textarea">
      <header>
        <h1>Welcome</h1>
      </header>
      <p>
        Text text more text.
      </p>
      <p>
        And more text.
      </p>
    </div>

    <div id="contactallpages">
      Random small textbox
      <br>More small text.
    </div>

  </div>
</div>

Answer 1

你应该这样做的方法是一个容器div和3个孩子div设置为display: inline-block;

使用display: inline-block;会将所有div彼此相邻放置，并允许您使用vertical-align属性。

现在您需要做的就是为每个孩子div设置正确的垂直对齐方式。您还可以将容器的高度设置为div（#myPage），这是vertical-align用于确定定位的高度。

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

＆＃13;

＆＃13;

#myPage div {
  display: inline-block;
  width: 100px;
}

#centerFold {
  height: 200px;
  vertical-align: middle;
  background-color: yellow;
}

#navBar, #contact{
  height: 100px;
}

#navBar {
  vertical-align: top;
  background-color: red;
}
#contact {
  vertical-align: bottom;
  background-color: blue;
}

＆＃13;

<div id="myPage">
  <div id="navBar">
    
    </div>
  
  <div id="centerFold">
    
    </div>
  
  <div id="contact">
    
    </div>  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您没有太多担心向后兼容性，请尝试使用flexbox。我现在的时间不允许详细说明，但重要的部分是

#centercontainer {display: flex}
#contactallpages {align-self: flex-end}

请注意，旧浏览器需要一些前缀，这只是符合标准的解决方案。它做你想要的一切，你可以忘记漂浮。添加

 #textarea {flex-grow: 1}

甚至可以让中心不仅在高度上增长，而且在宽度上也会增长。