将两个箭头（以图像的形式）放在`div`元素的左侧和右侧

Question

我有一个div元素的形式。我需要在它的两边放置两个图像（箭头）。

我想要类似的东西：

我只为该框编写了以下代码。我有两个名为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;
}

Answer 1

HTML / CSS解决方案如何：

HTML：

<div class="box">
    <img class="green" src="Images/green.jpg" alt="green">
    <img class="red" src="Images/red.jpg" alt="red">
</div>

的CSS：

.box {
    height: 100px;
    width:  100px;
    position: relative;
    background: blue;
}
.green,
.red {
    width: 100px;
    height: 60px;
    display: block;
    top: 50%;
    margin-top: -30px; /* img height/2 */
    position: absolute;
}
.green {
    left: -100px; /* img width */
    background: green;
}
.red {
    right: -100px; /* img width */
    background: red;
}

<强> Demo

Answer 2

尝试使用jQuery before和after在div之前和之后追加箭头图片。

此外，由于最后 - 即在追加之前和之后 - 你将有三个元素，你需要让它们display: inline;或float: left;出现在一个水平线上。

见：

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指容器，将容纳所有三个容器。

请参阅此fiddle

Answer 3

如果你不知道箭头图像的大小，你可以用这样的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文档。

Answer 4

修改您的插入顺序

$('<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");