首页 文章

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

提问于
浏览 次
0

EDIT: The problem is solved, so thanks to everyone who helped!

Original post:
所以我试图把三个div放在一起（直到到目前为止这部分已经成功），第三个和最后一个div喜欢去附加到div的底部，我不知道如何做到这一点 .

How can I put the third div to attach to the bottom of the middle div and stay within the container?

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

enter image description here

图像中的黑色是“身体” . 灰色是一个容器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>
html css html5 css3

2 回答

  • 1

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

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

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

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

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

    <div id="myPage">
  <div id="navBar">
    
    </div>
  
  <div id="centerFold">
    
    </div>
  
  <div id="contact">
    
    </div>  
</div>
    回复于
  • 0

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

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

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

    #textarea {flex-grow: 1}

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

    回复于

相关问题