javascript - 如何使用 jquery 水平对齐更多跨度

Question

我正在尝试开发自定义工作表，例如，用户可以浏览和上传特定 div 内的更多图像。该图像应该只能在该 div 内拖动(我做到了)。打印图像前有两个选项，第一个是无序对齐打印，第二个是对齐打印。因此，当用户单击对齐按钮时，所有上传的图像都应该在该 div 中一张接一张地水平对齐。

我试过的代码，

CSS。

.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 0px 0px 0; font-size: .9em; }
.ui-widget-header p, .ui-widget-content p { margin:0px } 
#snaptarget { height: 842px; width:595px;  border:2px solid green; padding: 10px;}

index.jsp

<Input type="button" value="align" onclick="alignment();"> 

<input type="file" id="files" name="files[]" accept="image/gif,image/jpeg"/>
<input type="button" id="p" value="print" onclick="printing();" align="right">
<p id="list"> </p> 

<div id="draggable" class="draggable ui-widget-content">  </div>

<input type="text" value="0" id="textid">

使用以下代码使用动态 id 动态创建 span，

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        var txtval=$('#textid').val();
        addplus1 = 1;
        txtval=parseInt(txtval)+parseInt(addplus1);
        //txtval+=addplus1;
        alert(txtval);
        $('#textid').val(txtval);
        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.

                var span = document.createElement('span');
                span.innerHTML = ['<span id="s'+txtval+'" style=" width: 300px;"><ul id="un" class="img-list"><li onclick="getid(this)"><img id="img" class="thumb" src="', e.target.result,
                    '" title=" click this image for deselect" /><span class="text-content"><span>Click here to Drag</span></span></ul></span>'].join('');

                document.getElementById('list').insertBefore(span, null);
            };
        })(f); 

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

尝试对齐代码，

function alignment() {
    var lengthoftxt=$('#textid').val();

    for(var i=1;i<=lengthoftxt;i++)
    {
        $('#s'+i).each(function() {
            // $(this).css({"marginLeft": "opx"}); 
            $(this).css({"align": "horizontly"}); 
            //how to align horizontly one by one within that div???
        });
    }    
}

$(document).ready(function() {
    $('#textid').val('0');
});

演示:http://jsfiddle.net/46psK/908/

我哪里错了？如何做到这一点？

Answer 1

希望这是你想要的工作

p#list 在 #snaptarget 之外，因此新创建的元素被放置在外面。将 p 标签放入 #snaptarget

<div id="snaptarget" class="ui-widget-header">
     <p id="list"></p>
</div>

下面的 js 代码将 float 设置为带有 ID 的跨度，但所有这些跨度都有另一个跨度作为包装器，因此 float 从未按预期工作。

$('#s' + i).each(function () {

     $(this).css({
          "float": "left"
      });
});

您可以在创建跨度时添加一个类 say item。

 var span = document.createElement('span');
 span.className = "item";

并且在对齐函数中添加一个类 say float-left 到所有具有类 item

的跨度

 $('.item').addClass('float-left');

在 CSS 中

.float-left{ float: left}

Demo Fiddle