javascript - appendTo 后不需要的 div 换行

Question

亲爱的 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);

上面的代码(如预期的那样)将新创建的 DIV 元素“下一个”附加到我的网格行的末尾。我的 DOM 看起来也像 expexted。 eventRow 包含带有日期等信息的网格字段，以及使用 Javascript 定位放置的附加订单:

<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>

问题:

因此，如果所有内容都正确附加并且顶部和左侧位置根据放置在 eventRow 中的元素数量不断变化，那么问题是什么？

在将十个左右的元素添加到 eventRow 之前没有。在那之后，下一个要添加的元素突然被拉出预期的位置。我花了一些时间检查发生了什么，我能弄清楚的是(在我的 CSS 中向左浮动)元素在行之后附加到彼此旁边即使它们之后被重新定位。

因此，当 div 元素的总数达到大于屏幕宽度的集体宽度时，浏览器环绕 DIV 并在 DIV 中的新行上开始下一个元素。这就是我的定位困惑的原因，因为它巧妙地不断向该行添加增加的左值。

我的 CSS 如下:

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;
}  

TLDR；

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

Answer 1

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

1. 仅使 DIV 的宽度为一个像素或在附加到网格后将显示类型更改为不可见。
2. 移除左边的 float ，使所有订单在彼此下方对齐。
3. 更改剩余位置的计算方式。

前两个失败是因为 DIV 上的最小宽度不影响内联文本。此外，在放置后重新定位和重新调整大小时，问题仍然会发生。移除左侧 float 使得基于顶部的定位(网格行中的多个元素彼此下方)变得非常困难。

所以最终的解决方案是找出何时 DIV 包装发生。这是通过将预期位置(假设订单将放置在前一个订单之后)与实际位置进行比较来完成的。如果这不匹配，您就知道父 DIV 正在包装该元素。