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项“next”附加到行末的网格中。我的DOM也看起来像被开除了。 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附加到行内。发生这种情况时，Web浏览器会将新添加的代码包装到一个新行中，这会影响我的定位。由于这可以在较小分辨率的屏幕上更快地发生，我希望阻止这种包装发生或找到一个合适的替代方案来解决这个问题。

Answer 1

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

仅将DIV的宽度设为一个像素，或者将显示类型更改为附加到网格后不可见。
移除左边的浮动，导致所有订单在彼此下方对齐。
更改计算左侧位置的方式。

前两个失败，因为DIV上的最小宽度不会影响内联文本。此外，当重新定位并在放置问题后重新调整尺寸仍然会发生。移除浮动左侧使得基于顶部的定位（网格行中彼此之下的多个项目）非常困难。

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

appendTo后不需要的div包装

1 个答案: