Question

我的问题是如何在div的右上角放置图像或跨度。我在谷歌搜索，发现

/* div that contains the image or span */
#div{ position:relative;}

/* image or span */
#span{ position:absolute; top:0px; right:0px;}

但这不是我发现的。它没有任何空间，所有其他的东西都在下降或上升。请给我解决方案。

Answer 1

使用position:relative和absolute

<强> HTML

<div class="wrap">
    <span>Right aligned</span>
</div>

<强> CSS

.wrap{
    position:relative;
    width:150px;
    height:150px;
    background:yellow
}
span{
    display:inline-block;
    position:absolute;
    right:0;
    top:0;
    background:red
}

<强> DEMO

方法2

使用float:right代替position:absolute

.wrap{
    width:150px;
    background:yellow;
    display: inline-block;
}
span{  
    background:red; float:right;
    display: inline-block;
}

<强> DEMO 2

Answer 2

或者你可以使用float来轻松选择它占据了它的空间并定位于其父边界角落所以只需添加

float:right;

和然后清除旁边的浮动

<div style="clear:right"></div>

Answer 3

您使用的是#div和#span，而不仅仅是div和span。

前缀：

#用于提及元素的ID名称。
.用于提及元素的类名。
并且没有任何内容可用作提及标记名称的前缀。（只需div或span）

从css样式属性中删除#前缀，您的代码将起作用。

另一种方法是使用background-image并使用background-position将图片置于div的右上角。

div{background-image: url(yourImagePathHere); background-position: top right;}

Answer 4

如果div中的第一项是span或img，则可以使用此项。

<强> CSS：

.d
{
display:block;
width:200px;
height:200px;
}

.s
{
display:block;
width:100px;;
height:100px;
float:right;
}

<强> HTML：

<div class="d"><span class="s"></span></div>

将图像定位在div的右上角

4 个答案: