Không thể xóa dấu phẩy: bên trái

Question

Tôi gặp sự cố trong số JS Fiddle này.

Vấn đề chính là với phao: thuộc tính bên trái.

Tôi có mã cho phép kéo và thả các phần tử có float: thuộc tính bên trái. Họ đang tạo ra vấn đề khi tôi muốn đặt các điều khiển song song trong khu vực div tiếp theo.

Vấn đề là rõ ràng hơn, nếu bạn nhìn vào JS Fiddle. Sau đây là các bước để đi qua Fiddle

1. nhấp chuột vào nút add div
2. nó chia div đỏ vào hai hộp
3. tại kéo ít nhất hai hoặc ba điều khiển trên (ví dụ như firstname, tên cuối cùng) vào phía bên trái hộp màu đỏ
4. tại kéo sự kiểm soát khác ở bên phải hộp bên

Dưới đây là vấn đề, sự kiểm soát ở phía div đúng được đặt trái sang kiểm soát cuối cùng của bên trái div.

Myhtml.html

<input type="button" class="Mybutton" value=" Add div" /> 
<br /> 

<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250px;"> 
    <div id="new" style="margin-bottom:10px; "> 
     <div style="width:80px; float:left;"> 
      <span id="LabelU1">FirstName : </span> 
     </div> 
     <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> 
      <input name="FirstName" type="text" id="FirstName" style="width:90%;;border:none;resize:none;float:left;"> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
</div> 
<div height="100%" width="100%"></div> 
<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250;"> 
    <div id="new" style="margin-bottom:10px; "> 
     <div style="width:80px; float:left;"> 
      <span id="LabelU2">LastName : </span> 
     </div> 
     <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> 
      <input name="LastName" type="text" id="LastName" style="width:90%;;border:none;resize:none;float:left;"> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
</div> 
<div height="100%" width="100%"></div> 
<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:200px;"> 
    <div id="new" style="margin-bottom:10px; "> 
     <div style="width:80px; float:left;"> 
      <span id="LabelU3">Web : </span> 
     </div> 
     <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> 
      <input name="Web" type="text" id="Web" style="width:90%;;border:none;resize:none;float:left;"> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
</div> 
<div height="100%" width="100%"></div> 
<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250px;"> 
    <div id="new" s tyle="margin-bottom:10px; "> 
     <div style="width:80px; float:left;"> 
      <span id="LabelU4">Mobile : </span> 
     </div> 
     <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> 
      <input name="Mobile" type="text" id="Mobile" style="width:90%;;border:none;resize:none;float:left;"> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
</div> 
<div height="100%" width="100%"></div> 
<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250px;"> 
    <div id="new" style="margin-bottom:10px; "> 
     <div style="width:80px; float:left;"> 
      <span id="LabelU5">jot : </span> 
     </div> 
     <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> 
      <input name="jot" type="text" id="jot" style="width:90%;;border:none;resize:none;float:left;"> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
</div> 
<div height="100%" width="100%"></div> 


<div id="Section1" style="height: 100px; line-height: 20px; width: 100%; border: 1px dotted red; display: table;"> 
    <div class="well droppedFields ui-sortable Resizable" style="width:73px;"></div> 
</div> 

Myjquery.js

function makeDraggable() { 
      $(".selectorField") 
       .draggable({ 
       containment: $('body'), 
       helper: "clone", 
       stack: "div", 
       cursor: "move", 
       cancel: null 
      }); 
     } 


     $(function() { 
      var _ctrl_index = 1001; 
      // function docReady() { 


      $(".Resizable").resizable({ 
       handles: 'e' 
      }); 

      makeDraggable(); 

      $(".droppedFields").droppable({ 
       accept: ":not(.ui-sortable-helper)", 


       drop: function (event, ui) { 


        var draggable = ui.draggable; 
        draggable = draggable.clone(); 
        draggable.appendTo(this); 
        // $(ui.draggable).hide(); 

        makeDraggable(); 
       } 
      }); 


      var count = 0; 
      $('.Mybutton').click(function() { 
       count++; 
       if (count < 5) { 
        // alert("aa"); 

        var a = $("<div class='well droppedFields ui-sortable Resizable'></div>").appendTo("#Section1"); 
        a.droppable(); 
        a.resizable({ 
         handles: 'e' 
        }); 
        a.droppable({ 
         accept: ":not(.ui-sortable-helper)", 


         drop: function (event, ui) { 


          var draggable = ui.draggable; 
          draggable = draggable.clone(); 
          draggable.appendTo(this); 
          // $(ui.draggable).hide(); 

          makeDraggable(); 
         } 
        }); 

       } else { 
        alert('No more divs to add'); 
       } 
      }); 
     }); 

Answer 1

Bạn đang rất, rất gần. Chỉ cần sử dụng vertical-align như vậy:

#Section1 > div { 
    display: table-cell; 
    /*width: 1%;*/ 
    border-right: 1px dotted red; 
    text-align: center; 
    vertical-align: top; /* vertical-align to the rescue!!! */ 
} 

Chỉ cần một sửa chữa nhỏ, căn chỉnh dọc sẽ là bạn của bạn !! :)

http://jsfiddle.net/tdorbbv6/106/