1

当我单击添加按钮时，我正在尝试将图像添加到我的 div 内部底部到顶部。现在它正在工作，但我的问题是 div 不滚动。我做错了什么？

JSFiddle 链接

HTML

 <button id="add_content">Add</button>
 <div class="image_panel"></div>

CSS

  .image_panel {
     width:100%;
     height:300px;
     border:1px solid red;
     overflow-y:scroll;
  }
  #add_content{
     float:left;
  }

JavaScript

$(document).ready(function() {
  var smallimg_count=0;
  var bottom=0;
  $("#add_content").click(function() {
    smallimg_count++;
    bottom=bottom+20;      
    var insert_html_small = '<div id="imageGrid_' + smallimg_count + '"  class="imageGrid_small"  >
                               <img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:' + bottom + 'px;" />
                             </div>';
    $(insert_html_small).appendTo(".image_panel");
  });
});
4

3 回答 3

1

我看到的一个问题是您添加的图像具有绝对位置内联样式（来自您的 JSFiddle）

例如

style="bottom:' +   bottom + 'px; position: absolute;'

因此，它与 div 处于不同的堆叠上下文中

删除它似乎使它工作：http: //jsfiddle.net/4Ftev/12/

例如

$(document).ready(function () {
    var smallimg_count = 0;
    var bottom = 0;
    $("#add_content").click(function () {
        smallimg_count++;
        bottom = bottom + 20;
        var insert_html_small = '<div id="imageGrid_' + smallimg_count + '"  class="imageGrid_small"  ><img   class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" /></div>';
        $(insert_html_small).appendTo(".image_panel");
    });
});

如果你想自下而上添加它，那么你可以使用prependTo，见这个 JSFiddle

http://jsfiddle.net/4Ftev/15/

$(document).ready(function () {
    var smallimg_count = 0;
    var bottom = 0;
    $("#add_content").click(function () {
        smallimg_count++;
        bottom = bottom + 20;
        var insert_html_small = '<div id="imageGrid_' + smallimg_count + '"  class="imageGrid_small"  >' + smallimg_count + '<img   class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" /></div>';
        $(insert_html_small).prependTo(".image_panel");
    });
});
于 2013-04-16T21:06:52.293 回答
0

You are using an absolute positioned image, inside a div which is not relative positioned.

First of all, add position:relative; to the .image_panel class style

What you will notice now, is that the image is positioned relative to the div. If you want to test the scrollbar, i would recommend you to use a margin instead of the absolute positioning on your image.

Like, margin-top:900px;

Css

  .image_panel
    {
     width:100%;
     height:300px;
     border:1px solid red;
     overflow-y:scroll;
     position:relative;
     }
   #add_content{
     float:left;
    }

Javascript

        $(document).ready(function(){
var smallimg_count=0;
var bottom=500;
$("#add_content").click(function(){
smallimg_count++;
bottom=bottom+20;      
var insert_html_small = '<div id="imageGrid_' +   smallimg_count + '"  class="imageGrid_small"  ><img   class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="margin-top:' +   bottom + 'px;"    /></div>';
$(insert_html_small).appendTo(".image_panel");
});
});

http://jsfiddle.net/3gzaW/

Best regards. Jonas

于 2013-04-16T21:06:17.680 回答
0

您的图片：

<img class="resize1" id="resize_3" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:60px; position: absolute;;">

带走位置：绝对；（使其相对，或完全删除）

于 2013-04-16T21:07:30.170 回答