如何在保持垂直位置的同时使div与父级的右侧对齐？

Question

请参考我绘制的这个方便的图表:

div1的身高不明.div3宽度是流动的; 它永远不应该重叠div2.二者div1并div2具有相同的宽度,并通过在水平方向为中心margin: auto.我如何定位,div3以便在与... 共享垂直位置时与右侧body(无论多宽body)对齐div2？(使用CSS)

Answer 1

.div1{
    margin:0 auto;
    width:100px;
    height:50px;
    border:5px solid #995555;
}
.div2{
    width:100px;
    margin:0 auto;
    border:5px solid #aaaa55;
    height:200px;
}
.div3{
    float:right;
    width:50px;
    height:100px;
    border:5px solid cyan;
}

<div class="div1">div1</div>
<div class="div3">div3</div>
<div class="div2">div2</div>

演示也在http://jsfiddle.net/XjC9z/1/

Answer 2

像这样？

\n\n

HTML：

\n\n

<div id=\'container\'>\n    <div id=\'first\'>1</div>\n    <div id=\'second\'>2</div>\n    <div id=\'third\'>3</div>\n</div>\xe2\x80\x8b\n

\n\n

CSS：

\n\n

#container{\n    width: 100px;\n    margin:0 auto;\n}\n\n#first{\n    border: 1px solid #ff55ff;\n}\n#second{\n    border: 1px solid #55ff77;\n}\n\n#third{\n    border: 1px solid #448855;\n}\n#first,\n#second{\n    width: 50px;\n    clear:both;\n\n    float:left;\n}\n\n#third{\n    clear:none;\n    float: left;\n}\n

\n\n

\xe2\x80\x8b

\n\n

请参阅此小提琴：\n http://jsfiddle.net/zaNvR/1/

\n

Answer 3

一个简单的 div 网格就可以解决问题：

\n\n

http://jsfiddle.net/NUGPv/

\n\n

<div class="con">\n    <div class="lft">div 1</div>\n    <div class="rgt"></div>\n</div>\n<div>\n    <div class="lft">div 2</div>\n    <div class="rgt">div 3</div>    \n</div>\xe2\x80\x8b\n\n.con { overflow:hidden; }\n.lft { width:100px; height:100px; float:left; }\n.rgt { width:100px; height:100px; float:left; }\n

\n\n

只需将右上角的单元格留空即可。

\n