Question

我想对齐div block右上方的红色标签。这是我的进步http://jsfiddle.net/E2aWr/158/

html

<div class="block">
<a href="#"><img src="http://www.balloontothemoon.com/images/Bubbles.jpg">
<span class="red-sticker">1<p>2</p></span>
</a>
</div>

css

.red-sticker {
font-family: Arial,sans-serif;
position: absolute;
right: 0px;
top: 0px;
display: block;
width: 32px;
height: 32px;
padding-top: 5px;
font-size: 12px;
line-height: 12px;
text-align: center;
float: left;
color: #FFF;
border-radius: 50%;
background-color: #A50200;
background-image: linear-gradient(to bottom, #CB0400, #A50200);
}
p:last-child {
 margin-bottom: 0px;
}

Answer 1

简单方法。

这是jsfiddle中的working example

Answer 2

尝试将此添加到您的css：

.block
{
    position: relative;
    float:left;
}

Answer 3

试试这可以提供帮助

＆＃13;

collectionview

＆＃13;

.block{position: relative;width: 284px;}
.red-sticker {
font-family: Arial,sans-serif;
position: absolute;
right: 0px;
top: 0px;
display: block;
width: 32px;
height: 32px;
padding-top: 5px;
font-size: 12px;
line-height: 12px;
text-align: center;
float: left;
color: #FFF;
border-radius: 50%;
background-color: #A50200;
background-image: linear-gradient(to bottom, #CB0400, #A50200);
}
p:last-child {
 margin-bottom: 0px;
}

＆＃13;

链接： http://jsfiddle.net/E2aWr/162/

Answer 4

您需要做的就是使用类＆＃34;阻止＆＃34;具有相对定位，因为当您使用绝对定位时，它会将元素从文档流中取出。

.block {
   position: relative;
   width: 280px;
}

http://jsfiddle.net/E2aWr/158/

将Div内部的跨度对齐在顶部

4 个答案: