Css 如何使div与父对象的右侧对齐，同时保持其垂直位置？

请参考我绘制的这张方便的图表：

---

div1

的高度未知

div3

的宽度是流动的；它决不能重叠

div2

。

div1

和

div2

具有相同的宽度，并通过

margin:auto

水平居中。如何定位

div3

，使其与

div2

共享垂直位置时，与

body右侧对齐（无论
body
有多宽）？（使用CSS）
一个简单的div网格就可以做到：



第一组
第2组
第3组
​
.con{溢出：隐藏；}
.lft{宽度：100px；高度：100px；浮点：左；}
.rgt{宽度：100px；高度：100px；浮点：左；}

只需将右上角的单元格留空即可。
像这样吗

HTML:

​

看这把小提琴：

.div1{
保证金：0自动；
宽度：100px；
高度：50px；
边框：5px实心#995555；
}
.第2分部{
宽度：100px；
保证金：0自动；
边框：5px实心#aaaa55；
高度：200px；
}
.第3分部{
浮动：对；
宽度：50px；
高度：100px；
边框：5px固体青色；
}
div1
第三组
div2
是否与
div3
在
div2
右侧对齐？如果
body
的宽度大于
.lft
和
.rgt
的宽度之和，
div3
不会被
body
的右侧对齐，是吗？当我玩这把小提琴时，我看到去掉了“con”来自第一个外部div的类导致第二个外部div显示在与第一个外部div相同的行上。有人能解释一下overflow:hidden对第一个div做了什么吗？我已经更新并澄清了我的问题。第三个div应该与
主体的右侧对齐，而不是与第二个div的左侧对齐。@Arendax非常确定，如果父div有尺寸标注，它就可以工作。请发布一个有问题的示例。它与页面右侧对齐。这是我的Jquery中的一个问题。现在已修复。div3不应与div2重叠
<div class="con">
    <div class="lft">div 1</div>
    <div class="rgt"></div>
</div>
<div>
    <div class="lft">div 2</div>
    <div class="rgt">div 3</div>    
</div>​

.con { overflow:hidden; }
.lft { width:100px; height:100px; float:left; }
.rgt { width:100px; height:100px; float:left; }

<div id='container'>
    <div id='first'>1</div>
    <div id='second'>2</div>
    <div id='third'>3</div>
</div>​

#container{
    width: 100px;
    margin:0 auto;
}

#first{
    border: 1px solid #ff55ff;
}
#second{
    border: 1px solid #55ff77;
}

#third{
    border: 1px solid #448855;
}
#first,
#second{
    width: 50px;
    clear:both;

    float:left;
}

#third{
    clear:none;
    float: left;
}