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
}

デモ

方法 2

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

andとして言及するだけでなく、#divandを使用しています。#spandivspan

プレフィックス: _

  • #要素の ID 名に言及するために使用されます。
  • .要素のクラス名に言及するために使用されます。
  • また、タグ名を言及するための接頭辞としては何も使用されません (単純にdivまたはspan) 。

#CSS スタイル プロパティからプレフィックスを削除すると、コードが機能します。

別の方法は、background-imageを使用background-positionして画像を の右上に配置することdivです。

div{background-image: url(yourImagePathHere); background-position: top right;}
于 2013-03-04T12:08:36.820 に答える
1

または、フロートを使用して簡単なオプションを使用できます。スペースを取り、親の境界線の角に配置するだけで追加できます

float:right;

次に、その隣のフロートをクリアします

<div style="clear:right"></div>
于 2013-03-04T11:55:08.973 に答える
0

の最初のアイテムが または である場合、これを使用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>
于 2013-03-04T15:20:22.710 に答える