div bottom float - css

Question

我的页面上有2个ID;

<div id="a">
    <div id="b"></div>
</div>

带样式;

#a {
    height: 25px;
    width: 100px;
    background-color: #9DBA6A;
}
#b {
    height: 25px;
    width: 25px;
    background-color: #FF7E00;
}

我想将div b放在div a的底部，并使用-ve margin或padding，当div a的高度发生变化时，我想保持它的位置。布局不能改变。

这是一个图表;

你可以看到我的小提琴 here 和完整的布局here

提前致谢... :)

blasteralfred

Answer 1

看看这个小提琴...... http://jsfiddle.net/23gCd/

我已将<div id="b"></div>保留在<div id="a"></div>内。无论高度如何，它都会低于#a，但如果#b的高度发生变化，则必须在CSS中更改它。

CSS

#a {
    height: 25px;
    width: 100px;
    background-color: #9DBA6A;
    position: relative;
}
#b {
    height: 25px;
    width: 25px;
    background-color: #FF7E00;
    position: absolute;
    bottom: -25px;
}

将position: relative属性添加到#a允许我们相对于#b的位置绝对定位#a。因此，您可以从底部偏移#b -25px;如果#b的高度发生变化，您也必须更改该偏移量。

我希望这会有所帮助 赫里斯托斯

Answer 2

我在你的小提琴中试过这个并且它起作用了：

#a {
    height: 10px;
    width: 100px;
    background-color: #9DBA6A;
    position : relative;
}
#b {
    height: 25px;
    width: 25px;
    background-color: #FF7E00;
    position : absolute;
    bottom : -25px;
}

问候

Answer 3

嗯，如果高度没有硬编码，我不知道用普通css做这个的解决方案。但如果高度是硬编码的，只需在margin-top: 25px;上使用b ...

您希望如何更改a的高度？或者您会删除生产代码中的height: 25px;吗？

Answer 4

另一种方法是在父母身上设置position:relative（这不错！）和position:absolute在孩子身上设置。孩子的位置将根据父母计算，因此bottom:0会将其固定在底部。

请参阅http://jsfiddle.net/shP3D/12/