Javascript 附加到后不需要的div包装

您好，亲爱的SO用户

我还有一个问题。希望你能帮我

背景资料：

我正在一个网格上工作，它可以通过将项目拖放到相应的网格字段来存储项目。当通过切换到不同的周数重新计算网格时，该周的匹配对象将附加到我的网格行，如下所示：

//Create orderItem to place into the DOM
var div = "<div class='draggable orderItem stored' id='" + orderId + "'>" +
                    "<a href='#/order/" + orderId + "'>" + orderId + "</a>" +
                    "</div>";

//Append div to the end of the gridRow
var gridRow = "div #" + planningList[plannedItem].get("resource").cid + ".eventRow";
$(div).appendTo(gridRow);

TLDR

---

我的空间不足，无法将新DIV追加到行中。当这种情况发生时，web浏览器会将新添加的代码包装到一行，这会打乱我的定位。由于这种情况在分辨率较小的屏幕上发生得更快，我希望停止这种包装，或者找到一种合适的替代方法来解决这个问题。

我尝试了三种可能的解决方案：

附加到网格后，仅使DIV的一个像素宽或将显示类型更改为不可见。 拆下左侧浮子，使所有订单在彼此下方对齐。 更改计算左侧位置的方式。 前两个失败是因为DIV上的最小宽度不会影响内联文本。此外，在放置后重新定位和调整尺寸时，问题仍然会发生。移除左侧浮动使基于顶部的多个项目在网格行中相互下方的定位变得非常困难

因此，最终的解决方案是找出DIV包装发生的时间。这是通过将预期位置与实际位置进行比较来实现的，假设订单将位于前一个位置之后。如果不匹配，则知道父DIV正在包装该项

<div id="1886" class="eventRow">
    <div class="gridRow"></div>
    <div id="c303" class="draggable orderItem stored" style="width: 90px; position: relative; left: -680px; top: 0px;"></div>
    <div id="c308" class="draggable orderItem stored" style="width: 180px; position: relative; left: -775px; top: 20px;"></div>
    <div id="c312" class="draggable orderItem stored" style="width: 180px; position: relative; left: -960px; top: 40px;"></div>
</div>

div.eventRow {
    clear: left;
    width: auto;
    height: 90px;
    overflow: visible;
 }
 div.orderItem{
    float:left;
    text-align: center;   
    margin: 1px 5px 0px 0px;
    padding: 0px 0px 0 5px;
    background-color: #FFFFFF;
    width:60px;
    height:60px;
    border:1px solid #000000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 60px;    
}
div.orderItem.stored{ /* has been rendered on the grid */
    width:90px;
    height: 20px;
    line-height: 16px;
    display: inline-block;
}