2

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

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

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

但这不是我发现的。它不占用任何空间，所有其他事情都会下降或上升。请给我解决方案。

4

4 回答 4

4

使用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
}

演示

方法二

使用float:right代替position:absolute

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

演示 2

于 2013-03-04T11:51:33.797 回答
1

或者您可以使用浮动来轻松选择它占用它的空间并定位到它的父边框角所以只需添加

float:right;

然后清除它旁边的浮动

<div style="clear:right"></div>
于 2013-03-04T11:55:08.973 回答
1

您正在使用#divand#span而不是仅将它们称为divand span。

前缀：_

  • #用于提及元素的 ID 名称。
  • .用于提及元素的类名。
  • 并且没有任何内容用作提及标签名称的前缀。（简单地说，div或span）

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

另一种方法是使用background-image并使用background-position将图像定位在div.

div{background-image: url(yourImagePathHere); background-position: top right;}
于 2013-03-04T12:08:36.820 回答
0

如果您的第一项div是spanor ，您可以使用它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>
于 2013-03-04T15:20:22.710 回答