Css 具有float属性的div布局

我想实现以下布局：

代码如下：

<div class="m">
    <div class="l"></div>
    <div class="r">
        <div class="r1"></div>
        <div class="r2"></div>
    </div>
</div>

其结果是：

我做错了什么？

---

任何帮助都将不胜感激

这对你有用吗

---

您必须设置

位置：绝对；顶部：0px。

你没有做错什么，r2的位置是可以预料的。您需要为.r2设置一个负的最大值。顶部负值等于.r1的高度。所以如果
.r1{height:50px；}
那么
.r2{top:-50px；}
。另一个选项是浮动.r1和.r2，而不是定位它们。
尝试在r上使用
position:relative
，并更改为position:absolute onr1和r2，在两者上保留
top:0

小心，这样内容r将扩展到r1和r2以下。如果这是一个问题，为了避免出现这种情况，请使用r
右键填充
根据您的原始代码，我制作了一个可以实现您绘制的布局的程序

当然，小提琴中的边框和颜色是为了演示

生成的html：

<div class="m">
    <div class="l">Left</div>
    <div class="r">Right
        <div class="r1">R1</div>
        <div class="r2">R2</div>
    </div>
    <div class="clearfix"></div>
</div>

你试过r2上的
top:0
吗？@lorenzo-s:是的，我试过。相同的结果。好的，那么试着在r上使用
position:relative
，在r1和r2上改为
position:absolute
，在两者上都保留
top:0
。@lorenzo-s:工作得很好。把它作为答案贴出来，这样我就可以接受了。谢谢你实际上这使得
r1
和
r2
根据屏幕定位，而不是
r
div。
r
div必须像lorenzo-s写的那样有
position:relative
。谢谢你，这完美地解决了我的问题。不，div
r
除了这些div之外没有其他内容。
div{
    height:100px;
}
div.m{
    border:1px solid black;
    width: 100%;
}
div.r{
    position:relative;
    border:1px solid blue;
    width:33%;
}
div.r1, div.r2{
    border:1px solid red;
}
div.l{
    float: left;
    border:1px solid green;
    width:33%;
}
div.r{
    float: right;
}
div.r2{
    position:absolute;
    right:65px;
    top:0px;
}
div.r1{
    position:absolute;
    width:60px;
    right:0px;
    top:0px;

}

<div class="m">
    <div class="l">Left</div>
    <div class="r">Right
        <div class="r1">R1</div>
        <div class="r2">R2</div>
    </div>
    <div class="clearfix"></div>
</div>

div.m {
    border: 2px solid gray;
    width: 100%;
}
div.m div.l{
    border: 2px solid green;
    float: left;
}
div.m div.r {
    border: 2px solid blue;
    float: right;
    display: inline-block;
}
div.r1, div.r2 {
    border: 2px solid red;
    display: inline-block;
}
div.clearfix {
    clear: both;
}