位置 2 绝对 DIV 在 1 个相对 DIV 内 bootstrap 容器内

Question

我正在尝试将 2 div 放置在 bootstrap 容器内的 1 div 内...一个位于左上角，一个位于右上角。

我可以将左上角的那个放在我想要的位置，但是右下角的 right: 20px 放在浏览器本身的右侧，而不是在容器内。

这是我的 HTML & CSS:

<div id="header">
<div class="container">
    <div class="div1">
        Top left content
    </div>
    <div class="div2">
        Bottom right content
    </div>
</div>
</div>

#header {
height: 625px;
position: relative;
}

#header .div1 {
position: absolute;
top: 20px;
}

#header .div2 {
position: absolute;
bottom: 20px;
right: 20px;
}

任何关于如何让右下角 div 位于容器而不是浏览器右侧的建议，将不胜感激。

谢谢

Answer 1

<style>
#header {
height: 625px;
position: relative;
}

#header .div1 {
float: left;
top: 20;
}

#header .div2 {
position: absolute;
bottom: 20;
right: 0;
}
</style>

<div id="header">
<div class="container">
    <div class="div1">
        Top left content
    </div>
    <div class="div2">
        Bottom right content
    </div>
</div>
</div>

Answer 2

您的绝对 div 放置在 #header 元素内，因为您在其上应用了 position:relative。

Bootstrap 没有明确设置容器 class 的相对位置。您需要为容器设置位置，然后您的绝对 div 将被放置在容器内：

.container{
  position: relative;
}

所以，最好替换以下内容：

#header {
   height: 625px;
   position: relative;
}

有了这个：

#header .container{
   height: 625px;
   position: relative;
}

位置 2 绝对 DIV 在 1 个相对 DIV 内 bootstrap 容器内

Position 2 absolute DIV inside 1 relative DIV within bootstrap container

html

css

twitter-bootstrap

responsive