Question

我正在尝试构建一个尺寸为26x26像素的容器，并在此容器的最右下方显示一个数字。另外，我想在容器中添加24x24背景图片。

我到目前为止的代码如下

<html>
<style>
body {
    height:26px; 
    width:26px; 
    background-color:red;
}
#bottom {
    vertical-align:bottom; 
    text-align:right; 
    background-color:yellow;
}
</style>

<body>
    <p id="bottom">2</p>
</body>
</html>

这是一个简化JSFiddle的链接https://jsfiddle.net/n8ku715x/

从JSFiddle可以看出，它并没有完全发挥作用。它甚至没有设置正确的尺寸。任何帮助表示赞赏。

Answer 1

＆＃13;

didReceiveRemoteNotification

＆＃13;

这是你的容器，里面有数字 - 是你想要的吗？

Answer 2

试试这个：

CSS

.container{
width:26px;
height:26px;
position:relative;
background-color:red;
}
.container-number{
position:absolute;
bottom:0;
right:0;
background-color:yellow;
}

HTML

<div class="container">

<div class="container-number">2</div>

</div>

Answer 3

如果你想要固定的

，只需添加底部0和位置

<强> CSS

public_content

使用背景图像在右下角显示一个数字

3 个答案: