Question

我使用以下解决方案将inner-div（角落）浮动到outer-div（base）的右上角。这很有效。

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>

现在我想将inner-div（角落）浮动到外部base-div（右下角）的底部，但是我无法找到正确的css配置。为了实现目标，我需要改变什么？

非常重要的是，基础div的文本浮动了角落div（如上例所示）。

Answer 1

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

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

Answer 2

尝试定位你的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内容到FLOAT内部 - 底角div，你将需要'TRICK'您的布局，模拟内底角下的空白区域

更多信息：

How can I wrap text around a bottom-right div?（值得一读）

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

2 个答案: