jquery를 사용하여 더 많은 스팬을 수평으로 정렬하는 방법

Question

사용자가 특정 div에있는 이미지를 찾아보고 업로드 할 수있는 것처럼 사용자 지정 워크 시트를 개발하려고합니다. 저 심상은 그 div 안에서만 draggable해야한다 (나는 그것을했다). 이미지를 인쇄하기 전에 두 가지 옵션이 있습니다. 첫 번째는 정렬되지 않은 정렬 인쇄이고 두 번째는 정렬 인쇄입니다. 따라서 정렬 버튼을 클릭하면 업로드 된 모든 이미지가 해당 div 내에서 하나씩 수평 정렬됩니다.

내가 노력 코드,

CSS.

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

얼라인먼트 코드 시도 코드 아래하여 동적 ID와 동적 범위를 생성

.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"> 

,

,745,

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 원한 일이다. JS 코드를 식별자로 스팬 플로트를 설정 한 아래 #snaptarget

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

내부는 P 태그를 가져하지만 이러한 모든 스팬 의도 한대로 따라서 수레는 일한 적이 래퍼와 같은 다른 범위를했다.

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

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

스팬을 생성하는 동안 클래스를 추가하여 item 수 있습니다.

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

및 정렬 기능에 클래스를 추가 모든 경간에 float-left 클래스를 item

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

그리고 CSS에를 가진 말

.float-left{ float: left} 

대신 marginLeft`의

Demo Fiddle