2

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

我想要类似的东西：

箭头和框

我只为盒子编写了以下代码。我有两个名为red.jpgand的箭头图像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

2

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;
}

演示

于 2013-04-16T06:59:25.493 回答
1

尝试使用 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指的是容器，要装这三个。

看到这个小提琴

于 2013-04-16T06:49:04.933 回答
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 ......

网页：

<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 回答
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 回答