请教一个样式问题?

Question

希望在同一行拖拽图片，效果如下：

但是现在拖拽的时候由于div是左浮动的，导致拖拽的过程中不在一行，效果如下：

html如下:

<div class="imgDiv" style="float: left">
                                        <img width="80px" height="80px" hiddenIndex="1" itemId="1" ondblclick="editCouponPic(this, 1)" src="url1">
                                        <br><button type="button" class="btn btn-default delClass" onclick="return removeImg(this);">删除</button>
                                    </div>
                                    <div class="imgDiv" style="float: left">
                                        <img width="80px" height="80px" hiddenIndex="2" itemId="2" ondblclick="editCouponPic(this, 1)" src="url2">
                                        <br><button type="button" class="btn btn-default delClass" onclick="return removeImg(this);">删除</button>
                                    </div>

拖拽js如下：

jQuery(document).ready(function ($) {
            $("#dropDiv").dragsort({dragEnd: saveOrder, dragSelectorExclude: "input, textarea, a[href],select"});
        });
        function saveOrder() {
            $('#dropDiv img').each(function (index ,e) {
                $(e).attr('hiddenIndex',index)
            });
        }

请问一下如果控制在一行拖拽呢，div不是左浮动嘛？

Answer 1

代码运行不了。
同一行的话，试试把浮动改成

display: inline-block;
vertical-align: top;