Question

我在JS Fiddle中遇到了问题。

主要问题在于浮动：左侧属性。

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

如果你看看JS Fiddle，问题会更清楚。以下是通过Fiddle

的步骤

点击添加div按钮
它将红色div分成两个框
现在将至少两个或三个上部控件（例如姓氏，姓氏）拖到左侧红框中
现在将另一个控件拖到右侧框

问题是，右侧div中的控件左侧放置在左侧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

你非常非常接近。只需使用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!!! */
 }

只需要一个微小的修复，垂直对齐将是你的朋友！：）

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

无法清除浮动：左

1 个答案: