具有float属性的div布局

Question

我想实现以下布局：

使用以下代码：

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

我的CSS看起来像这样：

div.m{
    ...
    width: 100%;
}
div.m div.l{
    float: left;
    ...
}
div.m div.r{
    float: right;
    ...
}
div.mainMenu div.r1{
    position: relative;
    right: 0px;
    ...
}
div.mainMenu div.r2{
    position: relative;
    right: 65px;
    ...
}

导致：

我做错了什么？ 任何帮助，将不胜感激。

Answer 1

这对你有用吗？

http://jsfiddle.net/xn8Ks/

Answer 2

您必须为r1和r2设置position:absolute; top:0px;。 http://jsfiddle.net/Zdkdp/2/

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;

}

Answer 3

尝试在 r 上使用position: relative并在 r1 和 r2 上更改为位置：绝对，留下top: 0在两者上。

小心谨慎，这样内容 r 将扩展到 r1 和 r2 以下。如果这是一个问题，要避免这种情况，请使用 r padding-right。

Answer 4

你没有做错任何事情，而且.r2的位置是可以预期的。您需要为.r2设置负顶值。负顶值等于.r1的高度。因此，.r1 { height: 50px;}然后.r2 { top: -50px; }。另一个选择是浮动.r1和.r2而不是定位它们。

Answer 5

根据您的原始代码，我制作了this jsfiddle来实现您绘制的布局。

小提琴中的边框和颜色当然是出于演示目的。

生成的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>

clearfix div就在那里，所以你不必为它上面的东西赋予特定的高度，确保m具有正确的高度，无论如何。

CSS：

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