2

ボックスの形のdiv要素があります。その両側に (矢印の) 2 つの画像を配置する必要があります。

私は次のようなものが欲しい：

矢印とボックス

ボックスのみに次のコードを書きました。と という名前の 2 つの矢印イメージがred.jpgありgreen.jpgますが、どのように配置すればよいですか?

<div id="result">   
</div>

<script>
$('<div id="box" class="boxed ">').text("a").appendTo("#result");

// Add to right
$("#result").prepend('<img id="red" src="Images/red.jpg" />');

//Add to left
$("#result").prepend('<img id="green" src="Images/green.jpg" />');
</script>

<style>
.boxed 
{
    font-size: 20px;
    border: 1px solid green ;
    height: 100px;
    width: 100px;

    padding-top:75px;
    padding-left:10px;
    padding-bottom: 10px;
    padding-right: 50px;

    margin-top: 50px;
    margin-right: 40px;
    margin-bottom: 10px;
    margin-left: 500px;
    background: blue;
}
4

4 に答える 4

1

矢印イメージのサイズがわからない場合は、このような jQuery を使用して配置できます (サイズがわかっている場合は、css を直接設定するだけです)。

まとめ - これを追加しました

CSS :

.boxed {
    position: relative;
}

#red,#green {
    position: absolute;
    top: 0;
}

JS :

$('#red').css({'right', -$('#red').width()});
$('#green').css({'left', -$('#green').width()});

完全なコード

私はあなたのCSSの一部を短縮することを許可しました...

HTML :

<div id="result"></div>

CSS :

.boxed {
    /*Place absolute positioned images relative to this box*/
    position: relative;

    font-size: 20px;
    border: 1px solid green;

    height: 100px;
    width: 100px;

    padding: 75px 50px 10px 10px; /*Syntax: Top, right, bottom, left*/
    margin: 50px 40px 10px 500px;
    background: blue;
}

#red,#green {
    /*Position absolute (they won't fill out space). The positions are set in js*/
    position: absolute;
    top: 0;
}

JS :

$('<div id="box" class="boxed ">').text("a").appendTo("#result");

// Add arrows
$("#result").prepend('<img id="red" src="images/red.jpg" />');
$("#result").prepend('<img id="green" src="images/green.jpg" />');

//Position arrows by css
$('#red').css({'right', -$('#red').width()});
$('#green').css({'left', -$('#green').width()});

css jQuery ドキュメント。

于 2013-04-16T06:53:20.450 に答える
1

jQuery before and afterを試して、 の前後に矢印画像を追加しますdiv。

また、最後に、つまり前後に追加した後、3 つの要素があるため、それらを作成するdisplay: inline;かfloat: left;、1 つの水平線に表示する必要があります。

これを参照してください：

var div = $('<div id="box" class="boxed left"></div>');
div.appendTo('.parent');
div.before('<a href="#" class="left" >
                  <img src="imageUrl" width="50px" height="50px" />
            </a>'
          );

div.after('<a href="#" class="left" >
              <img src="imageurl" width="50px" height="50px" />
           </a>'
         );

ここで.parentはコンテナを指し、3 つすべてを保持するつもりです。

このフィドルを参照してください

于 2013-04-16T06:49:04.933 に答える
0

挿入順序を変更する

$('<img id="red" src="Images/red.jpg" />').appendTo("#result");
$('<div id="box" class="boxed ">').text("a").appendTo("#result");
$('<img id="green" src="Images/green.jpg" />').appendTo("#result");
于 2013-04-16T06:47:21.897 に答える