javascript - 无法清除 float :left

Question

我在这个 JS Fiddle 中遇到了问题.

主要问题在于 float: left 属性。

我有允许拖放具有 float: left 属性的元素的代码。当我想将控件平行放置在下一个 div 区域时，他们正在制造问题。

如果您查看 JS Fiddle，问题就更清楚了。以下是通过 Fiddle 的步骤

1. 点击添加div按钮
2. 它将红色的div分成两个盒子
3. 现在将至少两个或三个上部控件(例如名字、姓氏)拖到左侧的红色框中
4. 现在将另一个控件拖到右侧框

问题来了，右侧div中的控件被放在左侧div的最后一个控件的左边。

我的html.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

你们非常非常亲密。只需像这样使用 vertical-align:

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

只需要一个小的修复，vertical-align 将是你的 friend !! :)

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