html - 父 div 左上角和右下角的 div

Question

我想将第一个 div 定位到父 div 的左上角，将第二个 div 定位到父 div 的右下角。这是我的代码！

<div class="parent"> 
<div class="tl">TopLeft</div>
<div class="br">BottomRight</div>
</div>

这是我的CSS，

  .parent
    {
        width: auto;
        height:300px;
        background: Black;
    }

  .tl
  {
  width:100px;
  height:40px;
  background:Aqua;
  }

 .br
  {
  position:absolute;
  width:100px;
  height:40px;
  right:0;
  bottom:0;
  background:Aqua;
  }

根据我的代码，左上角的 div 位置正确，但右下角的 div 在父 div 之外。想知道我的代码需要什么！

这是小提琴！

Answer 1

您需要将父元素的位置属性设置为相对。这将使孩子们正确地相对于父母而不是文档定位自己。

.parent {
    ...
    position: relative;
}

示例：http: //jsfiddle.net/grc4/dQCpy/1/

Answer 2

.parent
{
    width: auto;
    height:300px;
    background: Black;
    position:relative;
}

父级必须有一个相对位置。

Answer 3

<style>
.parent{
background-color: yellow;width: 500px;
}

.tl{
background-color: yellowgreen;float: left;width: 200px;
}
.br{
background-color: wheat;float: right;width: 100px;
}
.clr{
clear:both;
}
</style>

<div class="parent"> 
<div class="tl">TopLeft</div>
<div class="clr"></div>
<div class="br">BottomRight</div>
<div class="clr"></div>
</div>