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

通过我的代码，topLeft div位于正确的位置，但是右下方的div位于父div之外。想知道我的代码需要什么！

这是Fiddle！

Answer 1

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

.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>

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

3 个答案: