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

Posted 2023-03-05

【中文标题】如何在保持垂直位置的同时使 div 与父级的右侧对齐？

【英文标题】：How to make a div align to the right side of the parent while maintaining its vertical position?

【发布时间】：2012-09-25 14:26:15

【问题描述】：

请参考我画的这张方便的图：

div1 的身高未知。 div3 的宽度是流动的；它不应该重叠div2。 div1 和 div2 具有相同的宽度，并通过 margin: auto 水平居中。在与div2 共享垂直位置时，如何定位div3 使其与body 的右侧 对齐（无论body 有多宽）？ （使用 CSS）

【参考方案1】：

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

http://jsfiddle.net/NUGPv/

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

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

【讨论】：

这不是将div3 与div2 的右侧对齐吗？如果body 的宽度大于.lft 和.rgt 的宽度之和，div3 不会与body 的右侧对齐，对吗？

当我玩这个小提琴时，我看到从第一个外部 div 中删除“con”类会导致第二个外部 div 显示在与第一个外部 div 相同的行上。谁能解释一下 overflow:hidden 对第一个 div 做了什么？

【参考方案2】：

像这样？

html：

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

CSS：

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

​

看这个小提琴： http://jsfiddle.net/zaNvR/1/

【讨论】：

我已经更新并澄清了我的问题。第三个 div 应该与body 的右侧对齐，而不是第二个 div 的左侧。

【参考方案3】：

.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/

【讨论】：

@Arendax 很确定如果父 div 有尺寸，它可以工作。请发布一个有问题的例子。

它与页面右侧对齐。这是我的 Jquery 中的一个问题。现在已经修复了。

div3 不应与 div2 重叠