css - 如何在另一个div的右下象限浮动一个div？

Question

我使用以下解决方案将内部 div（角）浮动到外部 div（基础）的右上角。这很好用。

CSS：

#base {width: 100px; height: 100px;}
#corner {float: right; width: 40px; height: 40px; margin: 0 0 15px 15px;}

HTML：

<div id="base">
    <div id="corner">
        <!--stuff inside corner-->
    </div>
    <!--other stuff inside base-->
</div>

现在我想将内部 div （角）浮动到外部 base-div 的底部（右下角），但我无法找到正确的 css 配置。我必须改变什么才能达到我的目标？

非常重要的是，基本 div 的文本会浮动到corner-div（如上例所示）。

Answer 1

尝试定位你的 div

#base {
    width: 100px;
    height: 100px;
        /* positionning */
    position:relative;
}

#corner {
    /* float: right; */ /*floating will be useless */
    width: 40px;
    height: 40px;
    margin: 0 0 15px 15px;
        /* positionning */
    position:absolute;
    bottom:0;
    right:0;
}

现在，如果您需要外部 div 内容围绕内部底角 div 浮动，您将不得不“欺骗”您的布局，模拟内部底角下的空白空间

更多信息：

• 如何在右下角的 div 周围环绕文本？（值得阅读 ）

Answer 2

制作容器 div position: relative。然后，position: absolute在要“浮动”的 div 中使用（但您不需要使用float）并将bottomand rightrules 设置为 0。

http://jsfiddle.net/ExplosionPIlls/yWGTB/