1

私は既存のdivを持っています。このdivの上にいくつかの小さな画像アイコン（疑問符pngアイコンなど）を追加したいのですが、次のいずれかの位置でdivコーナーの真上（ただしdiv領域内）にフロートします。

右上左上下左下右下

1つの条件は、既存のdivが変更されないことです（レイアウト、マージン、スタイルなどは変更されません）。アイコンは単にそれらの上に浮かぶでしょう。画像にpadding-left属性を使用しようとしていますが、既存のdivのレイアウトが台無しになります。アイコンが浮かんでいても変わらないようにしたいと思います。jQueryまたはCSSでこれを行う簡単な方法はありますか？

ヒントを共有していただきありがとうございます。

4

2 に答える 2

1

あなたが試すことができます：

HTML

<div class="target" style="position:relative;height:200px;width:200px;background: #ccc;margin: 25px">
    Target div
</div>

jQuery

$('.target').append('<img src="http://www3.emersonprocess.com/rosemount/wirelessestimator/App_Themes/Basic/images/questionmark_icon.gif" style="position:absolute; top: -20px; right: -12px">');​

デモ

</ p>

于 2012-12-14T03:44:42.933 に答える
0

あなたが望むものを作るために、あなたはただCSSを使うことができます。あなたの4がdivにあると仮定すると、2つの方法でそれを行うことができます：

  • CSSスタイルの位置：DIVに相対、位置：それぞれに絶対を配置します。次に、それぞれについて、上、下、左、右などのCSS位置ルールを使用して要素を配置できます

例：

<div style="position: relative; width: 100px; height: 100px">
    <img src="your_file" style="position: absolute; left: 0; top: 0; width: 10px; height: 10px;">
    ....other <img> with different position...
</div>
  • のfloatCSS属性（左、右）を使用して、の各コーナーに配置します。
于 2012-12-14T03:48:53.827 に答える