0

我有三张图片作为示例。我想center使用jquery. 我通过以像素为单位的硬编码来设置"left" position包含div图像图标（底部）的图标"left"。但是，我需要根据屏幕大小和数量来设置它parent images。如果用户click在image1那时，则small image icon必须以bottom centered类似的Parent image方式出现以供其他images使用jquery

在 JSFiddle 中查看代码

在此处输入图像描述

帮助表示赞赏！

4

2 回答 2

1

您需要一个 div 来保存具有居中对齐的“粉红色”图像（文本对齐：居中）。对现有的 css 和 javascript 使用以下代码段

<style>
.image-holder
{
 display:block;
 height: 20px;margin-top: 100%;
 text-align: center;
}

.image
{
  height:20px;width:20px;vertical-align: top;
}    
</style>

<script>
$(document).ready(function(){
  // use your selector to find the appropriate div, I am using div for this sample
    $("div").on("click",function(){
    $(this).append("<div class='image-holder'><img src='imagepath' class='image' ></div>");
  });
});
</script>
于 2013-09-19T08:50:21.550 回答
0

感谢回复！我已经修改了我的代码，包括您的代码，并进行了某些更改以准确地工作我需要的内容如下：

在 CSS 中：

.mydiv {
    background: url("http://placehold.it/200x200&text=Shekhar img1") no-repeat;
    height: 150px;
    width: 150px;
    position: relative;
    margin:10px;
    float:left;

}
.row {
    position: relative;
    left: -50%
}

.image-holder
{
 display:block;
 height: 20px;
 text-align: center;
    margin-top: 101%;
}

.image
{
  height:20px;width:20px;vertical-align: top;
}

在 html 标记中：

<div id="header-image1" class="mydiv">

</div>
<div id="header-image2" class="mydiv">

</div>
<div id="header-image3" class="mydiv">

</div>

<div id="header-image4" class="mydiv">

</div>

在脚本中：

$(document).ready(function(){

    $(".mydiv").on("click",function(){
    $("#dynamicdiv").remove();
    $(this).append("<div id='dynamicdiv' class='image-holder'><img src='imagepath' class='image' ></div>");
  });
});

注意：1.7 版不支持使用“on”。所以，都用了2.0.0版本。

在此处查看完整的工作代码

谢谢@Lav G

于 2013-09-19T12:57:33.203 回答