如何正确使用CSS位置？

Question

我有3 DIV这样的

<div class="green">
  <div class="red">
    <div>......</div>
    <div class="yellow">......</div>
  </div>
</div>

使用这种结构，我希望得到一个类似于此的输出：

绿色DIV已设置为宽度100％，红色DIV具有固定宽度并设置为页面中心。所以我的问题是我希望将我的黄色DIV变为红色DIV，使其与红色DIV的右边对齐。

.red {
   position: relative;
}

.yellow {
   position: absolute;
   top: 0;
   right: 20px;
}

但这不是我想要的输出。

Answer 1

这里有一个小提琴，http://jsfiddle.net/P77RB/你可以玩宽度和高度来满足你的需要。

<div class="green">
<div class="red">
    <div class="yellow">
    </div>
</div>

.green{
width:500px;
height:300px;
background:green;
display:table;
 }
 .red{
width:80%;
height:270px;
margin:30px auto 0px auto;
background:red;
position:relative;
}
.yellow{
position:absolute;
background:yellow;
width:200px;
height:100px;
right:0;
top:50%;
margin-top:-40px;
}

Answer 2

你试过这个吗？

.yellow {
  float: right;
  position: relative;
}

Answer 3

您必须使用right: 0;

.yellow {
   position: absolute;
   top: 0;
   right: 0;
}

Answer 4

我测试了这个DEMO

根据您的页面调整高度和宽度。

    .red {
   position: relative;
   width: 60%;
   margin-right: auto;
   margin-left: auto;
   height: 100%;
   background: red;

}

.yellow {
   position: absolute;
   right: 0;
   background: yellow;
   top: 20;
   height: 80%;
   width: 60%;
}


.green {
  width: 100%;
  background: green;
  padding-top: 20px;
  height: 200px;

}

Answer 5

将黄色div放入HTML中的红色div中，然后将其设置为float：right;