使子div在父div右侧浮动

Question

我想让一个内部 div 浮动到父元素的右侧，而不管父元素的宽度是多少。这里有一个示例：http://jsfiddle.net/eqDyy/。那个 fiddle 只是示范了它应该是什么样子。它是根据给定的像素数完成的，但我要的是一种解决方案，即使父元素的宽度发生变化，内部 div 仍然能够出现在其父元素的右侧。

以下是 fiddle 中使用的代码：

HTML

<div id="one">
    <div id="two"></div>
</div>

CSS

#one {
    border:2px solid #ddd;
    width:150px;
    height:30px;
}
#two {
    border:2px solid #ddd;
    width:150px;
    height:30px;
    margin-left:150px;
    margin-top:-2px;
}

请记住，这只是为了展示我希望它看起来的样子，但这不是一个令人满意的实现，因为它使用了特定的像素值。

- Samuel Reid

Answer 1

因为百分比边距是相对于包含块的宽度计算的，所以您可以将 margin-left 设置为 100%。

示例

- freejosh

---

哇，那太简单了...我感到很不好意思，因为我自己没有想到。谢谢！我会尽快接受你的答案。 - Samuel Reid

Answer 2

#one {
    border:2px solid #ddd;
    width:150px;
    height:30px;
}
#two {
    border:2px solid #ddd;
    width:50px;
    height:30px;
    margin-left:150px;
    margin-top:-2px;
    float:right;
}

我稍微修改了#two，以展示结果。

http://jsfiddle.net/eqDyy/3/

- diegoperini

---

这似乎使内部div在父元素内向右浮动。我想让内部div在父元素的右侧浮动。Freejosh的答案可以实现：margin-left:100%。 - Samuel Reid

@SamuelReid 我会选择使用float right的方式，因为它可以让你在div中放置内容而不会导致对齐出现问题：float right example 与 margin-left。 - Pete

我正在使用这个代码来创建一个下拉菜单，类似于Suckerfish的菜单。但是Suckerfish的菜单项宽度是固定的，而我的菜单需要具有可变宽度。margin-left:100%是为了让子菜单出现在它们相应的父元素右侧。 - Samuel Reid

你难道不应该将它们绝对定位吗？ - Pete