div底部浮动- css

9rbhqvlz 于 2023-02-14 发布在其他

关注(0)|答案(4)|浏览(113)

我在我的网页上有2个身份证;

<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边距或填充，当div a的高度改变时，我想保持它的位置不变。布局不能改变。
这是一张图表

您可以看到我的小提琴**here**和完整的布局here。

css

来源：https://stackoverflow.com/questions/5613290/div-bottom-float-css

4条答案

按热度按时间

bcs8qyzn1#

看看这个小提琴... 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中，我们就可以相对于#a的位置绝对定位#b，这样就可以从底部偏移#b-25px;如果#b的高度改变了，你也必须改变偏移量。

赞(0）回复(0）举报 2023-02-14

n9vozmp42#

我在你的小提琴上试过了，效果很好：

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

问候语

赞(0）回复(0）举报 2023-02-14

hjqgdpho3#

嗯，如果高度没有硬编码的话，我不知道用普通的css做这个的解决方案，但是如果高度是硬编码的，就在b上使用margin-top: 25px; ...
您希望如何更改a的高度？还是要在产品代码中删除height: 25px;？

赞(0）回复(0）举报 2023-02-14

mbzjlibv4#

另一种方法是在父节点上设置position:relative（不错!），在子节点上设置position:absolute。子节点的位置将根据父节点计算，因此bottom:0会将其粘贴到底部。
参见http://jsfiddle.net/shP3D/12/

赞(0）回复(0）举报 2023-02-14